Cara menggunakan dropdown html attributes

By On Friday, October 21st, 2022 Categories : Tanya Jawab

Cara menggunakan dropdown html attributes – Hallo Agan semua, Makasih banyak dah mau berkunjung ke web TrendWisata ini. Di hari yang cerah ini, saya dari situs TrendWisata dotcom pengen memberikan Q&A yang mantap yang membahas Cara menggunakan dropdown html attributes. Silahkan teman menonton di bawah ini:

Styling HTML form fields, mainly <select> fields with CSS has always been a bit complicated. Changing a <select> form field in a particular way is frequently unmanageable. For that purpose, many websites are replacing <select> elements with a custom-built solution powered by HTML and
CSS.

There does not exist a placeholder attribute for the <select> tag. However, there are some ways of making a placeholder for the select box.

The easiest way of making a placeholder for the <select> element is using the disabled and selected attributes with the HTML5 hidden
global attribute.

Example of creating a placeholder for the <select> box with HTML5:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected hidden>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>

Result

Select box with a placeholder

Here is the second method of adding a placeholder for your select box. First, you need to create your select items with the help of the <option> tag. Then, set the disabled and
selected attributes for your empty element, which is supposed to be the placeholder.

Now, you can see that the first line is like a placeholder field. It will be undetectable but still visible.

Example of creating a placeholder for the <select> box with an unselectable line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>

To make it non-visible after the user clicks to select an option, you must set the display property to its “none” value. And also set the :invalid pseudo-class to fail to validate the contents of the <select> box placeholder. Also,
specify a color for your placeholder by using the CSS color property.

When the <select> element is required, it allows the use of the CSS :invalid pseudo-class, which allows you to style the <select> element when it’s in the “placeholder” state. The :invalid works here because of the empty value in placeholder option.

When a value is set, the :invalid
pseudo-class is dropped. You can also optionally use the :valid pseudo-class.

Example of creating a placeholder for the <select> box with the :required and :invalid pseudo-classes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      select:required:invalid 
        color: #666;
      
      option[value=""][disabled] 
        display: none;
      
      option 
        color: #000;
      
    </style>
  </head>
  <body>
    <h2>Select box with a placeholder</h2>
    <select name="drinks" required>
      <option value="" disabled selected>Choose a drink</option>
      <option value="coffee">Coffee</option>
      <option value="tea">Tea</option>
      <option value="milk">Milk</option>
    </select>
  </body>
</html>

Cara menggunakan dropdown html attributes | admin | 4.5
shopee flash sale gratis ongkir
x