html - 如何设置选择框表单的样式。它有什么限制吗？

Question

我正在尝试 HTML/CSS 中的样式选择框表单。我需要这样的东西：

我目前的结果在这里：http: //jsfiddle.net/LPN4J/1/

是否可以？

这是我的代码：

html:

<label>
    <select>
        <option selected> Select your option </option>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>
</label>​

CSS：

body, html {background:#444; text-align:center; padding:50px 0;}

select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

请任何提示。我从头开始学习 css。

Answer 1

好吧，根据你的问题，这个bootstrap插件可能会对你有所帮助。

用法：

1. 下载此(.zip) 或此(.tar.gz) 以下载插件

2. 然后将文件分别放在您的相关文件夹中。

3. 在您的选择框中，只需添加一个selectpicker.

Answer 2

也许是这样的？

html:

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

CSS：

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }

.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
   }

JSFIDDLE