input的一些用法
怎样使input的光标隐藏
color:transparent;
text-shadow:0 0 0 #303030;——改变字体怎样使input获取/失去焦点
js — onfocus/onblur
jquery — focus()/blur()改变下拉框的箭头样式
select {
/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
border: solid 1px #000;
/*很关键:将默认的select选择框样式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("../img/drop-down.png") no-repeat scroll right center transparent;
/*为下拉小箭头留出一点位置,避免被文字覆盖*/
padding-right: 14px;
}
- 改变radio的样式
input[type=radio]{
font-size:1em;
visibility: hidden;
position: relative;
display: inline-block;
width: 1em;
height: 1em;
}
input[type=radio]:before{
font-size:1em;
top:12%;
display: inline-block;
position: absolute;
content:' ';
visibility: visible;
height: 1em;
width: 1em;
display: block;
background: url("../img/checkbox_no.png") no-repeat;background-size: 1em 1em;
}
input[type=radio]:checked:before{
content:' ';
visibility: visible;
height: 1em;
width: 1em;
background: url("../img/yes.png") no-repeat;background-size: 1em 1em;
}
5.改变checkbox样式
input[type=checkbox]{
font-size:1em;
visibility: hidden;
cursor: pointer;
position: relative;
display: inline-block;
width: 1em;
height: 1em;
}
input[type=checkbox]:before{
top:12%;
display: inline-block;
position: absolute;
content:' ';
visibility: visible;
height: 1em;
width: 1em;
display: block;
background: url("../../img/checkbox_no.png") no-repeat;background-size: 1em 1em;
}
input[type=checkbox]:checked:before{
content:' ';
visibility: visible;
height: 1em;
width: 1em;
background: url("../../img/checkbox.png") no-repeat;
background-size: 1em 1em;
}