控件样式
input控件很多属性的设置没有生效,大都是-webkit-appearance
搞的鬼,比如:
input[type=number]后边的上下选择箭头,可以这样去掉:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
像input[type="text"]
的边框,直接重写是可以生效的,比如改成border:1px solid #eee
,
还有常见的radio,checkbox,像这两个因为可以有label与之配合,所以可以利用隐藏控件本省,而使用label伪元素去生成合乎要求的样式,如:
label{
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 32px;
&:before{
content: "";
width: 20px;
height: 20px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 8px;
background-color: #f2f2f2;
}
}
input[type=radio]{
display: none;
}
input[type=radio]:checked+label:before{
content: "\2714";
color: #3682ae;
text-align: center;
line-height: 20px;
}
然而select控件的自定义样式就没法这样搞定了,看到大部分实现方法是结合了js,点击小三角的事件导致弹出选项列表,然后用css折腾半天实现了个下面惨不忍睹的效果。
实验过后效果确实不能尽如人意,那么在这儿记录一下当前思路不能实习的原因:
小三角需要另一个空span标签来配合,绝对定位在select的上面。但是要实现三角点击有效,也就是说input标签其实是要在span标签上边的,但是还要使span标签样式可见,那么就只能给select的background-color使用rgba(),那么矛盾就来了,a值大,才能保证select的部分颜色正确;a值小,才能使三角部分的颜色显示正确,并且span的左边框也是被select的背景色盖住的,要保证这几个边框的颜色一致、三角和select背景色一致,实在是太难了,难于上青天。(如果你有css实现的办法,欢迎交流~)。
控件属性值获取
input[type="text"]之类中的值:
this.value;
$(this).val()
radio或者checkbox组中选中的值:
$(':radio:checked').val();
$(':checkbox:checked').val();
radio或者checkbox是否选中:
this.checked;
$(this).attr('checked')//报错undefined,网上很多地方都错写了这个方法,没有设置过的属性使用attr获取不到
$(this).eq(0).attr('checked')//这个却是可以的
$(this).prop('checked');
$(this).is(':checked');
那么jquery中的attr()与prop()区别是什么呢?
贴出对atrr()和prop()在源码中的实现方式差别最明显的两句:
//attr中
elem.setAttribute( name, value + "" );
ret = elem.getAttribute( name );
//prop
return ( elem[ name ] = value );
return elem[ name ];
官方的说法是1.6版本之前attr有时会出现不一致的行为,后边的就出现了prop(),并且建议:
具有如 checked, selected 或者 disabled 状态的元素使用prop(),其他的使用 attr()。
【参考】
http://www.jianshu.com/p/3edca0255361
http://www.w3cplus.com/css3/list-of-pseudo-elements-to-style-form-controls.html
http://www.cnblogs.com/zhwl/p/3520162.html