发表新帖
发表新帖

How to change the style of a <select>'s label?

后端 未结
关注
7 853
情话喂你
情话喂你 2020-11-30 12:39

I have a simple select box with an option group in my application.
提交评论
  •  加载中...
  • 星月不相逢
    2020-11-30 12:55

    On most browsers (tested on latest IE and FF), you can easily change the optgroup's label with CSS only:

        select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

    Obviously, you can set any classname instead of the select html tag.

    By the way, as other answers said, there are still few CSS options to use with select boxes and many webmasters override them using the method given by user949847. But this code above should be sufficient to match your needs.

    0 讨论(0)
  • 后悔当初
    2020-11-30 13:01

    Firefox style the label using this rule :

    optgroup:before {
    content: attr(label);
    display: block;
}

    You can override it.

    0 讨论(0)
  • 心在旅途
    2020-11-30 13:07

    Unfortunately select boxes are one of the few things that you can add very little style to with CSS. You are usually limited to how the browser renders it.

    For example, it looks like this in chrome:

    enter image description here

    And this in Firefox:

    enter image description here

    0 讨论(0)
  • 小鲜肉
    2020-11-30 13:10

    You can style a select box using only css, it requires a sort of work around:

    First, you surround it with a div and give that a class:

    <div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

    Then you make sure the select elements are styled a certain way using css:

    .selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ffffd;
   height: 25px;
}

    And you style the div:

    .selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}
    0 讨论(0)
  • 不思量自难忘°
    2020-11-30 13:10

    For a different approach to circumvent the problems with styling optgroups i suggest using disabled options.

    <option disabled>[group label]</option>

    you can have a shot on styling it via eg.

    <style> [disabled] { color:#000; background-color:#CCC } </style>
    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题