在mac下的chrome,对于select元素会默认有一个border-radius,当然有些情况下并不需要圆角,所以就要去掉. 比较常用的方法是: .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法有个缺点,因为要浏览器默认样式全部干掉了,所以右边原本的上下箭头也没了,所以推荐另外一种方案: .select { border: 0px; outline: 1px solid rgb(204,204,2…
问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .fixed { position: fixed; left:0…
今天在写一个小demo的时候,发现chrome下一个很奇怪的bug. 我的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chrome下float bug</title> <style> .clearfix{*zoom:1;} .clearfix:after{content:&qu…
html的input输入框在Chrome浏览器里是有默认样式的,当它获得焦点时,即使你没有为它设置:focus时的样式,Chrome浏览器还是会给它加上蓝色的边框,今天百度找到有个方法可以去除该默认样式. 给需要去除默认样式的元素加上这么一条CSS属性: -webkit-appearance: none;…
有这么一个webkit的私有属性: -webkit-appearance:none; /*去除input默认样式*/ 添加该样式,并且值为'none'时即可取消浏览器对于控件的默认样式. 另外这个属性也有个神奇的地方~ 他可以用来调用显示浏览器对各种控件的默认样式, 比如: 我是span啊亲!! 那么他所显示的效果就是button标签的自带样式. 哈 觉得挺有趣的~ 另外这个属性可以用来去除Iphone上面那个恶心的超大圆角的按钮默认样式,从而使自己编辑的按钮样式显示正常. 下面是这个属性可能会…
一.去除默认边框以及padding border: none;padding:0 二.去除聚焦蓝色边框 outline: none; 三.form表单自动填充变色 1.给input设置内置阴影,至少要比你的input本身大.不过,box-shadow是很慢的,适当大小.而且,如果你的input是用图片做背景的话,是没有办法做这么干的.设置transparent也不可以. input:-webkit-autofill, textarea:-webkit-autofill, select:-webk…
select::-ms-expand { display: none;}兼容ie10及以上…
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stackoverflow上查了,这个bug可能是由于dom元素未加载完而先执行了jquery代码引起的. 错误分析:我这个实例为:点击某个表单标签时(如checkbox),widget重新进行了render()操作(将dom元素remove并重新绘制),而formit插件给form表单默认增加的监听事件还作用在已…
去除select下拉框默认样式 select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*将背景改为红色*/ background:red; /*加padding防止文字覆盖*/ padding-right: 14px; } /*清除ie的…
最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角图片 图二:点击三角图片,同样实现下拉框选择  1.HTML <div class="withArrow"> <label for="">类型</label> <span class="testArrow "…