相关疑难解决方法(0)

是否有一种仅限CSS的方式来设置<select>下拉列表的样式？

我需要<select>尽可能多地为一个表单设置样式,而不需要任何JavaScript.我可以在CSS中使用哪些属性？

此代码需要与所有主流浏览器兼容:

• Internet Explorer 6,7和8
• 火狐
• 苹果浏览器

我知道我可以使用JavaScript:示例.

我不是在谈论简单的造型.我想知道,只有CSS才能做到最好.

我在Stack Overflow上发现了类似的问题.

而这一次在Doctype.com.

我在我的应用程序中使用bootstrap Dropdown组件,如下所示:

<div class="btn-group">
    <button class="btn">Please Select From List</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
       <li><a tabindex="-1" href="#">Item I</a></li>
       <li><a tabindex="-1" href="#">Item II</a></li>
       <li><a tabindex="-1" href="#">Item III</a></li>
       <li class="divider"></li>
       <li><a tabindex="-1" href="#">Other</a></li>
    </ul>
</div>

我想将所选项目显示为btn标签.换句话说,将"请从列表中选择"替换为已选择的列表项("项目I","项目II","项目III").

我为下拉列表的初始视图设置了自定义字体和背景(选择一个选项).它font-size是20像素,使用自定义字体看起来很棒.但是,当我点击列表时,选项本身不使用自定义字体,看起来正常,除了font-size,似乎继续.这似乎只是Chrome的情况(我也测试了Safari和Firefox).

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select>

我尝试为选项本身创建一个单独的类,但这似乎没有任何影响.

为了进一步说明,这里是一个JSFiddle.

铬:

火狐:

我想添加一个下拉列表来选择城市但不知道在选择之前如何选择默认值.我正在使用Bootstrap 3.

这是HTML标记:

<div class="btn-group">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        Select City <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <h5><img src="images/pk-flag.png" /> PAKISTAN</h5>
            </div><!-- col-md-12 -->
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Lahore</a></li>
                </div><!-- col-md-6 -->
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Islamabad</a></li>
                </div><!-- col-md-6 -->
            </div><!-- col-md-12 -->
            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Karachi</a></li>
                </div><!-- col-md-6 -->
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <li><a href="#">Faisalabad</a></li> …