相关疑难解决方法(0)

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

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

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

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

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

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

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

而这一次在Doctype.com.

我根据解决方案使用自定义选择/下拉菜单:https://stackoverflow.com/a/10190884/1318135

除了右边的"箭头"看起来不太好外,这个功能很棒.我希望它更广泛,外观与本网站上/下投票箭头相似(左图).

尝试以下方法,使用以下任何一个或其他选项打开解决方案:
- 将图像集成到HTML中(无法将其显示在前景v.下拉列表中) -
为字符添加带有更宽箭头的字体(找不到)一)
- 在CSS中设置背景图像属性(显示默认向下箭头)

http://jsfiddle.net/XxkSC/553/

HTML:

<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>

CSS:

label.custom-select {
position: relative;
display: inline-block;

  }

.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
 }




/* Select arrow styling */
.custom-select:after {
content: "?";  /* Current arrow I would like to change …

我无法更改Bootstrap 3中选择元素的border-radius.我尝试更改一些其他属性,如background-color或border-color,这些属性对我有用.唯一不起作用的风格是border-radius.我不知道我做错了什么.

HTML:

<div class="container">
    <form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <div class="input-group">
                    <input type="text" class="form-control search-box" placeholder="Search">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-search"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6 col-md-offset-3">
                <div class="col-md-6">
                    <select class="form-control"></select>
                </div>
                <div class="col-md-6">
                    <select class="form-control"></select>
                </div>
            </div>
        </div>
    </form>
</div>

CSS:

body {
    padding: 0;
    margin: 0;
}

.form-horizontal {
    margin-top: 50px;
}

/* Remove border-radius, box-shadow, border-right and transition of input box */
.search-box {
    border-radius: 0px; …