样式复选框,单选按钮和下拉菜单

Question

如何设置HTML复选框,单选按钮和下拉菜单的样式？或者我可以吗？

我想将图像用于复选框或单选按钮,对于列表也是如此 - 下拉箭头在大多数情况下看起来并不好看.

Answer 1

看到这两个用于样式复选框和单选按钮的jQuery插件的链接:

http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Answer 2

简短的回答:你不能很好地和持续地做到这一点.

您可能希望听到的答案,具体取决于您的情况:使用jQuery或类似的东西,这将为您提供大量的插件供您选择.

这 两个是一些更好的,因为它将让你风格几乎所有不同的控件.

Answer 3

你当然可以,

Checkboxes和Radio按钮很容易定制只有css(没有js).实现(上面已经由KunalB提到)涉及隐藏输入并使用标签(使用before自定义图像的伪元素)来触发输入

Dropdowns另一方面,要困难得多,迄今为止还没有100%的纯css +跨浏览器解决方案...... (这是我的下拉菜单的答案)

所有3的现场演示:单选按钮,复选框和下拉菜单.

自定义复选框

<div>
    <input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
    <label for="RememberMe">Remember me</label>
</div>

CSS

input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] ~ label {
    display:inline;
    font-size: 18px;
}

input[type="checkbox"] ~ label:before {
    content: '';
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/unchecked.png) no-repeat;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 3px; /*rtl*/
}

input[type="checkbox"]:checked ~ label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/checked.png) no-repeat;
}

自定义单选按钮

<ul>
    <li>
        <input type="radio" id="radio1" name="radios" checked />
        <label for="radio1">Apples</label>
    </li>
    <li>
        <input type="radio" id="radio2" name="radios" />
        <label for="radio2">Pineapples </label>
    </li>
</ul>

CSS

input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    display:inline;
    font-size: 18px;
}

input[type="radio"] + label:before {
    content: '';
    display:inline-block;
    width: 32px;
    height: 32px;
    background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
    vertical-align: middle;
}

input[type="radio"]:checked + label:before {
    content: '';
    background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}

自定义下拉列表

<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->

CSS

label {
    position: relative;
    display: inline-block;
}

select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: #74646e;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: #fff;        
}

/* Select arrow styling */
.notIE label:after {
    content: '';
    width: 23px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 4px;
    right: 4px;
    background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
    pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) { 
    .notIE label:after
    {
        display:none;
    }
}