控件样式
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伪元素去生成合乎要求的样式，如：
Paste_Image.png
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
网友评论