发表新帖
发表新帖

How to style the option of an html “select” element?

后端 未结
关注
18 2482
迷失自我
迷失自我 2020-11-21 05:09

Here\'s my HTML:
提交评论
  •  加载中...
  • 臣服心动
    2020-11-21 05:28

    Even if there aren't much properties to change, but you can achieve following style only with css:

    .options {
  border: 1px solid #e5e5e5;
  padding: 10px;
}

select {
  font-size: 14px;
  border: none;
  width: 100%;
  background: white;
}
    <div class="options">
  <select>
    <option value="">Apple</option>
    <option value="">Banana</option>
    <option value="">Orange</option>
    <option value="">Mango</option>
  </select>
</div>

    0 讨论(0)
  • 悲哀的现实
    2020-11-21 05:30

    As already mentioned, the only way is to use a plugin that replaces <select> functionality.

    A list of jQuery plugins: http://plugins.jquery.com/tag/select/

    Take a look at the example using Select2 plugin: http://jsfiddle.net/swsLokfj/23/

    0 讨论(0)
  • 抹茶落季
    2020-11-21 05:32

    You can use inline styles to add custome styling to <option> tags.

    For eg : <option style="font-weight:bold;color:#09C;">Option 1</option> This will apply the styles to this particular <option> element only.

    Then you can use a bit of javascript magic to apply the inline styles to all of the <option> elements within a <select> tag like so :

    var select = $(document).getElementById('#select-element-id')

    var option = select.children('#option-element-id')

    option.css('font-weight', 'bold')

    option.css('font-size', '24px')

    You can also use <option value="" disabled> <br> </option> to add a line-break between the options.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-21 05:33

    Here's some ways to style <option> along with the <select> if you're using Bootstrap and/or jquery. I understand this isn't what the original poster is asking but I thought I could help others that stumble onto this question.

    You can still achieve the goal of styling each <option> separately, but may need to apply some style to the <select> as well. My favorite is the "Bootstrap Select" library mentioned below.

    Bootstrap Select Library (jquery)

    If you're already using bootstrap, you can try the Bootstrap Select library or the library below (since it has a bootstrap theme).

    Note that you are able to style the entire select element, or the option elements separately.

    Examples:

    Dependencies: requires jQuery v1.9.1+, Bootstrap, Bootstrap’s dropdown.js component, and Bootstrap's CSS

    Compatibility: Unsure, but bootstrap says it "supports the latest, stable releases of all major browsers and platforms"

    Demo: https://developer.snapappointments.com/bootstrap-select/examples/

    .special {
  font-weight: bold !important;
  color: #fff !important;
  background: #bc0000 !important;
  text-transform: uppercase;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker">
  <option>Mustard</option>
  <option class="special">Ketchup</option>
  <option style="background: #5cb85c; color: #fff;">Relish</option>
</select>

    Select2 (JS lib)

    There's a library you can use called Select2.

    Dependencies: Library is JS + CSS + HTML only (does not require JQuery).

    Compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+

    Demo: https://select2.org/getting-started/basic-usage

    There's also a bootstrap theme available.

    No Bootstrap example:

    $(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

    Bootstrap example:

    $(function() {
  var $select = $('.select2');
  
  $select.select2({
    theme: 'paper'
  });
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>

<select class="select2 form-control" placeholder="Country">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

    MDBootstrap ($ & Bootstrap & JQuery)

    If you have extra money, you can use a premium library MDBootstrap. (This is an entire UI Kit, so it's not light)

    This allows you to style your select and option elements using the Material design.

    There is a free version, but it won't allow you to use the pretty Material design!

    Dependencies: Bootstrap 4, JQuery,

    Compatibility: "supports the latest, stable releases of all major browsers and platforms."

    Demo: https://mdbootstrap.com/docs/jquery/forms/select/#color

    0 讨论(0)
  • 梦如初夏
    2020-11-21 05:33

    Bootstrap allows you to use styling via data-content:

    <select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>

    Example: https://silviomoreto.github.io/bootstrap-select/examples/

    0 讨论(0)
    • 上一页 1 2 3 下一页
     看不清?
    提交回复
    热议问题