How should I style HTML "select" and "option" tags_问答_开发者

How should I style HTML "select" and "option" tags

开发者 https://www.devze.com 2023-04-04 17:30 出处：网络

I want to make my HTML <select> and <option> tags beautiful, but I also don\'t wan开发者_运维技巧t to get far from native implementation. For example, I don\'t want to use dome <div>

I want to make my HTML <select> and <option> tags beautiful, but I also don't wan开发者_运维技巧t to get far from native implementation. For example, I don't want to use dome <div> elements and create a drop-down list using jQuery (for the purposes of accessibility). However, as we know, HTML <select> is really ugly.

How can I achieve these both requirements? What is a good practice to apply styling on HTML <select> tag and its related <option> tags?

there is a good reason most plugins dealing with forms wanting to style them use divs:

as soon as you touch any form element with any css other then font size and margin, things will starts falling apart, because different OS & browser combinations style form elements differently. things will start getting misaligned, you lose vertical alignment, etc...

so i suggest using divs (and all the accessibility stuff) if you want to mess around with form elements.

edit: yes, there are a couple of other "safe" css properties, but these are not enough to achieve what you describe

the real trick is simply overcoming user-agent default styles for forms and form controls/labels. you can come pretty close if you target different browsers with specific styles. this can get ridiculously out of hand fast, so its best to know what you're doing. formalize is an awesome lib that resets the styles and works with a plethora of JavaScript libraries. http://formalize.me/

This is what I used to make my select dropdown look nicer. I think it looks pretty nice.

* {
font-size: 18px;
}

#cars {
    height: 35px;
    background-color: lightgray;
    color: black;
    border: none;
    padding: 5px;
    appearance: none;
    cursor: pointer;
    border-radius: 5px;
    outline: none;
    margin: 5px;
    text-align-last: center;
}

#cars option {
    background-color: white;
    color: black;
}

<!DOCTYPE html>
<html>
<body>
<form>
  <label for="language"><b>Select a coding language:</b></label><br>
  <select name="language" id="cars" required>
    <optgroup label = "Front End">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </optgroup>
    <optgroup label = "Preprocessors">
      <option value="Sass">Sass</option>
      <option disabled>Coming soon</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>