[英]Styling html select and checkbox
这是小提琴。 我正在尝试使用CSS设置<select>
和<input id='checkbox'>
样式。 我目前正在使用select {background: #4a4a4a}
并且可以使用,但是我无法使用其他任何样式。 使用input[type='checkbox'] {background: #4a4a4a}
时,复选框样式完全无效
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
我开始了一个项目,在此项目中我制作了自己无法样式化的表单元素。 欲了解更多信息请参见该问题。
样式复选框
样式复选框在各个浏览器之间都是棘手且不一致的。 这是纯CSS方法。 利用标签和输入的id=
连接时,单击标签可激活输入框本身。 那里不需要JavaScript。
的HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS隐藏复选框,根据需要设置<span>
样式。 我在这里使用了CSS Sprite。
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
选择输入样式
我还没有找到一个简单的解决方案。 这是一篇有关骇客的文章,似乎很不错。
鉴于每种浏览器在输入元素样式方面都有自己的规则和例外,我倾向于使用http://uniformjs.com/之类的东西来实现一致的输入样式。 在具有数千个输入元素的页面上放慢速度,但是在其他方面却非常出色。
您不能设置所有表单元素的样式。 浏览器往往不允许您设置复选框的样式和选择框(以及下拉菜单,单选按钮,文件上传等)。 我之前使用的一般概念是隐藏实际元素,并使用替换元素(例如div)显示给用户。 可以将div样式设置为以所需方式显示和工作。 最容易错过的棘手部分是,当用户与模拟元素进行交互时,您必须实际更改隐藏表单元素的状态。
这是一个JQuery插件 ,将提供上述功能。 编写此插件的目的是用户可以根据需要对元素进行样式设置。 这是一个JsFiddle示例,它演示了插件并以一些基本样式公开了CSS选择器。 下面的基本代码...
的HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
jQuery查询
$(document).ready(function () {
$('body').styleMyForms();
});
的CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
想想在框中,当您在浏览器中查看时,填充的选择似乎有多少框...
很多 ,并且它们具有很多相关的样式/脚本(背景/颜色,填充,打开/关闭等功能)。
而实际上你看不到任何东西在你的代码
所以代码只能来自浏览器
和浏览器不同 ,所有答案都是正确的,请勿尝试设置其样式,而应由JavaScript替换元素和功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.