Input List - Bira | 24.05.18

In this example below you will see how to do a Input List - Bira | 24.05.18 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by uideveloper007, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright uideveloper007 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Input List - Bira | 24.05.18</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form class="form-input">
   <fieldset class="group-fixed-supported">
    <legend>Fixed supported</legend>
    <p>
      <label for="dateInput"><code>input[type=date]</code></label><br>
      <input type="date" placeholder="date" id="dateInput" name="dateInput" value="" required>
    </p>
    <p>
      <label for="monthInput"><code>input[type=month]</code></label><br>
      <input type="month" placeholder="month" id="monthInput" name="monthInput" value="" required>
    </p>
  </fieldset>
  <fieldset class="group-supported">
    <legend>Native Supported</legend>
    <p>
      <label for="textInput"><code>input[type=text]</code></label><br>
      <input type="text" placeholder="text" id="textInput" name="textInput" value="" required>
    </p>
    <p>
      <label for="passwordInput"><code>input[type=password]</code></label><br>
      <input type="password" placeholder="password" id="passwordInput" name="passwordInput" value="" required>
    </p>
    <p>
      <label for="emailInput"><code>input[type=email]</code></label><br>
      <input type="email" placeholder="emaill" id="emailInput" name="emailInput" value="" required>
    </p>
    <p>
      <label for="telInput"><code>input[type=tel]</code></label><br>
      <input type="tel" placeholder="tel" id="telInput" name="telInput" value="" required>
    </p>
    <p>
      <label for="urlInput"><code>input[type=url]</code></label><br>
      <input type="url" placeholder="url" id="urlInput" name="urlInput" value="" required>
    </p>
    <p>
      <label for="numberInput"><code>input[type=number]</code></label><br>
      <input type="number" placeholder="number" id="numberInput" name="numberInput" value="" required>
    </p>
    <p>
      <label for="searchInput"><code>input[type=search]</code></label><br>
      <input type="search" placeholder="search" id="searchInput" name="searchInput" value="" required>
    </p>
    <p>
      <label for="datalistInput"><code>input[list]</code></label><br>
      <input list="browsers" placeholder="datalist" id="datalistInput" name="datalistInput" value="" required>
      <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
      </datalist>
    </p>
    <p>
      <label for="textareaInput"><code>textarea</code></label><br>
      <textarea placeholder="textarea" id="textareaInput" name="textareaInput" required></textarea>
    </p>
  </fieldset>
  <fieldset class="group-unsupported">
    <legend>Unsupported</legend>
    <p>
      <label for="timeInput"><code>input[type=time]</code></label><br>
      <input type="time" placeholder="time" id="timeInput" name="timeInput" value="" required>
    </p>
    <p>
      <label for="datetimeInput"><code>input[type=datetime-local]</code></label><br>
      <input type="datetime-local" placeholder="datetime-local" id="datetimeInput" name="datetimeInput" value="" required>
    </p>
    <p>
      <label for="weekInput"><code>input[type=week]</code></label><br>
      <input type="week" placeholder="week" id="weekInput" name="weekInput" value="" required>
    </p>
    <p>
      <label for="selectInput"><code>select</code></label><br>
      <select name="select" placeholder="select" id="selectInput" name="selectInput" required>
        <option value="1">Chrome</option>
        <option value="2">Firefox</option>
        <option value="3">Internet Explorer</option>
        <option value="4">Opera</option>
        <option value="5">Safari</option>
        <option value="6">Microsoft Edge</option>
      </select>
    </p>
  </fieldset>
</form>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/uideveloper007/input-list-bira-or-240518-LmorwB */
/* start of core style */

::-webkit-input-placeholder {
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}

::-ms-input-placeholder {
  color: #999;
}

::placeholder {
  color: #999;
}

textarea:placeholder-shown,
input:placeholder-shown {
  border: 2px solid green;
}

input,
select,
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type=date][placeholder]:invalid::-webkit-datetime-edit, input[type=month][placeholder]:invalid::-webkit-datetime-edit, input[type=week][placeholder]:invalid::-webkit-datetime-edit {
  display: none;
}

input[type=date][placeholder]:invalid::before, input[type=month][placeholder]:invalid::before, input[type=week][placeholder]:invalid::before {
  color: #999;
  content: attr(placeholder);
}

input[type=time][placeholder]:invalid::-webkit-datetime-edit, input[type=datetime-local][placeholder]:invalid::-webkit-datetime-edit {
  display: none;
}

input[type=time][placeholder]:invalid::before, input[type=datetime-local][placeholder]:invalid::before {
  color: #999;
  content: attr(placeholder);
}
/* end of core style */


.form-input {
  line-height: 1.6;
  padding: 0 16px;
  padding: 0 1rem
}


.form-input fieldset {
  margin-top: 16px;
  margin-top: 1rem;
}


.form-input .group-supported {
  color: green;
  border: 2px solid green;
}


.form-input .group-fixed-supported {
  color: blue;
  border: 2px solid blue;
}


.form-input .group-unsupported {
  color: red;
  border: 2px solid red;
}

Comments