【9159.com】使用appearance属性改变元素的外观,做

作者: 前端  发布:2019-08-28

解决手机浏览器和微信中select中border:none;无用和去掉小三角,selectborder

设置select的边框为none;在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框

解决办法:

1 appearance:none;
2 -moz-appearance:none; /* Firefox */
3 -webkit-appearance:none; /* Safari 和 Chrome */

appearance使用方法

1 .elmClass{
2     -webkit-appearance: value;
3     -moz-appearance: value;
4     appearance: value;
5 }

例子:使用appearance属性改变元素的外观

1 <p class="lookLikeAButton">我是一个段落P元素 </p>
2 <p class="lookLikeAListbox">我是一个段落P元素 </p>
3 <p class="lookLikeAListitem">我是一个段落P元素 </p>
4 <p class="lookLikeASearchfield">我是一个段落P元素 </p>
5 <p class="lookLikeATextarea">我是一个段落P元素 </p>
6 <p class="lookLikeAMenulist">我是一个段落P元素</p>

 1 /*看起来像个按钮,以按钮的风格渲染*/
 2 .lookLikeAButton{
 3      -webkit-appearance:button;
 4      -moz-appearance:button;
 5 }
 6 /*看起来像个清单盒子,以listbox风格渲染*/
 7 .lookLikeAListbox{
 8      -webkit-appearance:listbox;
 9      -moz-appearance:listbox;
10 }
11 /*看起来像个清单列表,以listitem风格渲染*/
12 .lookLikeAListitem{
13      -webkit-appearance:listitem;
14      -moz-appearance:listitem;
15 }
16 /*看起来像个搜索框,以searchfield风格渲染*/
17 .lookLikeASearchfield{
18      -webkit-appearance:searchfield;
19      -moz-appearance:searchfield;
20 }
21 /*看起来像个文本域,以textarea风格渲染*/
22 .lookLikeATextarea{
23      -webkit-appearance:textarea;
24      -moz-appearance:textarea;
25 }
26 /*看起来像个下接菜单,以menulist风格渲染*/
27 .lookLikeAMenulist{
28      -webkit-appearance:menulist;
29      -moz-appearance:menulist;
30 }

 

9159.com 1

 

更多内容可以参考

设置select的边框为none;在PC端是没有问题的,但是放到手机浏览器和...

::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不同表单元素的默认外观展现。

deviceType();

禁用 select 默认下拉箭头

 

deviceType();

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{
display: none;
}

9159.com,表单元素在网页设计中使用的非常频繁,如文本输入框、单选框、复选框、选择列表、上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的外观,使用自定义的,对于产品本身来说这样的要求是加分项,开发在力所能及的范围内应该大力支持。做H5移动开发,并没有原生APP开发那样,大部分内容都可以自定义,移动端H5页面受手机系统的影响,不同的浏览厂商对表单元素的渲染效果差异很大。

}

二、使用伪元素改变 IE10 表单元素默认外观

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

9159.com 2

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
display: none;
}

关于 IE10 伪元素的介绍,大家可以关注IE10官网伪元素 (Pseudo-elements),讲得非常详细~

<meta name="screen-orientation" content="portrait"/>//uc

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>自定义表单元素的外观</title>

<style type="text/css" media="all">
{padding:0;margin:0;}
input,select,textarea,button{outline:none;}
.form{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;}
.form input::-webkit-input-placeholder,.form textarea::-webkit-input-placeholder{color:#AAAAAA;}
.form input:focus::-webkit-input-placeholder,.form textarea:focus::-webkit-input-placeholder{color:#EEEEEE;}
.form fieldset{border:none;}
.form legend{display:none;}
.form-line{padding-bottom:10px;}
.form-line .info{padding-left:10px;font-size:12px;color:#999999;margin-top:6px;}
.form-line .label{display:block;padding-left:10px;font-size:12px;color:#666666;margin-bottom:6px;}
.form-line .element{padding-bottom:6px;}
.form-btn{margin-top:30px;}
.ico-clear{display:inline-block;width:22px;height:22px;padding:11px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM7SURBVFhH1ZnNbhoxEMfpuXmL9l2a3qrk0DR9nYi8QA99hJJTlWM4cOFDAg4E8VFAXBBwCpWKUFELwp3/xouWrT/GaycRK1nZsGPPz7Mz47E3l/O4Wq3W60ql8q5Wq Wr1ep3aj26X9DfP2jyvodnUuYUfTxUuncVQrwigFMCKFD7TU04NvQpYAyM5U7g0IMUnZGiliOgdkIYi97QBwcEnmi5XH5Dg9 FAk2Pg7Ghg0djkaLBP9KAv54KNh5X6rjIDC199eqpQRXWvnL2bQn75blhE/q OkHT67l QdgoSMHAcg8Svnhp2Fg/ZZBPRmiZDbQBRklftNtt17zrI780Zg9T6hqPx RWj9dkMvGB2PcdDAZitVqJ6XRqytV3SitjUdC5QrPZFLvdbg8cAno0Gh2MOZvNTEY4O4CWWUG7gtXrdbHZbA6AfaDTsBgLltYZjN78/UHWkAWM8TV3Oh2x3W69oVWweHtwD1Owo/bYW5n  cbJDL7QOlj8btMPxggY5R4Jr20d4udZoX1gpe51VJpy3CE9GVfoALDRGwBrjm7yXOsm5bjQoWCl7jyAb7MAo48NOjAsrHwL4H5WYBP0YrH4L3cjG3ACzMDTz1H0PfgAm6CTOTAALAqiBwBjs2hNKzYZnXsAOgQs9IM1GDAGRE2guuAetglznsfA3i4BZaoAS8KHKJgil/ANOg5swCqv75XWdLDwWbhHiNoj5SpRWsu0cJhg49Rly9Mcv03J5BF0OMVxDgruohASOqrYXIsfjmXTBggE/Vj84OKWl1lgY/gA0IVkPcxyC64b6FzME/r9Hlhuke5NvjwcDoPUBjrobrfL3yKBnGC1m1BMBHuuULWBCrrX65kC/1y5czZt85PLbojaANDxxnY n5tgi9rDFBxakDWXOtcANCxt2zBy02Sj0RA4nDHIL8mIb42nP9T5eI6q4pkc1WEgoI/uuDUBfRwH2kknJ/e4fK5PBqTnM tM2CaESKVgLHKjP4Nc0ZoNbJCq5wRyjoO5DEDK1CU/oakXhSyAqj4yIFF73FBbZ4BHnxuUik7fMUJMoFQqnch6GpsAHMj0qf2k3/6i4Z7aDzxDqoQs vjo/gcu5hKkyDDBRAAAAABJRU5ErkJggg==") center center no-repeat;background-size:22px 22px;text-indent:-9999px;}
.form .ico-clear{position:absolute;top:1px;right:0;z-index:1;display:none;}
.form .show-clear .ico-clear{display:inline-block;}
.input{border:1px solid #BBBBBB;border-radius:4px;position:relative;}
.input .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;border-radius:4px;}
.select{border:1px solid #BBBBBB;border-radius:4px;position:relative;}
.select .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;color:#333333;border-radius:4px;}
.arrow-down{display:inline-block;cursor:pointer;width:13px;height:9px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC7SURBVEhLtdPdEUAwDABgK9jJClawgj61r1awghXsZAUS19JfkRR3jtMmXzVp03iX1no0xkz N8k75JkhT5eNtcgOE/AWYxbBHFuCRYgY8xCX48YKCBvLICGG22S3yw3ET3IbIX55ygGLWM96EX/1WLM3iFKqvRpDgrERp3EwMcLBqhEGVmqcHQsf1IQ68bDqgejGBLu6i0oejzOxhZs/mP8Sq0OcSGDfIAT2LVLA/kG81u/xHFUV/s/gAw305R72o0XTAAAAAElFTkSuQmCC") 0 0 no-repeat;background-size:13px 9px;text-indent:-9999px;}
.select .arrow-down{position:absolute;right:12px;top:20px;}
.checkbox,.radio{width:10px;height:10px;background-color:#CCCCCC;margin-right:4px;-webkit-appearance:none;}
.radio{-webkit-border-radius: 5px;border-radius: 5px;}
.checkbox{vertical-align:-4px;}
.checkbox:checked,.radio:checked{background-color:#333333;}

/* 禁用select默认下拉箭头 */
select::-ms-expand{display:none;}
/* 禁用PC端表单输入框默认清除按钮 */
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none}
/* 禁用radio和checkbox默认样式 */
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
</style>
</head>
<body style="padding: 10px;">
<form class="form">
<fieldset>
<legend>表单标题</legend>

<div class="form-line">
    <label for="" class="label">文本输入框</label>
    <div class="input show-clear"><!-- 表单输入内容后,添加class:show-clear 可显示清除按钮 -->
        <input type="tel" class="text" placeholder="信用卡卡号">
        <a href="javascript:" class="ico-clear">清除</a>
    </div>
</div>

<div class="form-line">
    <label for="radio1" class="label"><input type="radio" class="radio" id="radio1" name="radio">单选按钮1</label>
    <label for="radio2" class="label"><input type="radio" class="radio" id="radio2" name="radio">单选按钮2</label>
</div>

<div class="form-line">
    <label for="checkbox1" class="label"><input type="checkbox" class="checkbox" id="checkbox1" name="radio">复选按钮1</label>
    <label for="checkbox2" class="label"><input type="checkbox" class="checkbox" id="checkbox2" name="radio">复选按钮2</label>
</div>

<div class="form-line">
    <label for="" class="label">下拉列表框</label>
    <div class="select">
        <select name="" id="" class="text">
            <option value="">所在省份</option>
            <option value="">广东</option>
            <option value="">北京</option>
        </select>
        <a href="javascript:" class="arrow-down"></a>
    </div>
</div>

</fieldset>
<form/>

</body>
</html>

结束语

由于电脑没有安装 IE11,不知道微软在 IE11 的版本有无支持 apprearance ,如果有,那么标准也算是出来啦,对全世界都好,如果say no,只能说:呵呵,你妹的!!!

如今手机浏览器厂商前缀无非 -webkit 和 -ms ,webkit 很明显占据了的优势,虽然这样,但我们也不能忽视了微软的 winphone ,毕竟有一定的用户就不可忽视它的价值,只希望它们早日达成一致,向标准靠齐~

9159.com 3

 

fetch(url,{method:"DELETE",credentials:'include'}).then((res)=>{

上个月,为了适配微信 winphone 5.0 版本的 IE10 浏览器,我做了一些对 IE10 兼容的测试,并写了《迎接微信winphone 5.0 版本的IE10样式兼容》一文,之前处理 IE10 表单元素的默认外观是采用透明度为 opacity:0 的写法来重置表单的外观,这个办法使用起来有点复杂,对表单内容的输入,需要做额外的处理。近期浏览IE开发人员指南.aspx)的官网,了解到 IE10 对表单元素的默认外观也新增了伪元素来处理,也算是向前看齐,可能是因为 winphone 用户少,大家目前只做好 webkit 做兼容,对 winphone 兼容缺少了关注,今天分享下 3 个常用的伪类元素。

9159.com 4

::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check{
display: none;
}

leturl=Config.api.portfolio '/' id;

测试demo请进入

从上图我们可以看出:

//CSS处理

表单元素在网页设计中使用的非常频繁,如文本输入框、单选框、复选框、选择列表、上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的外观,使用自定义的,对于产品本身来说这样的要求是加分项,开发在力所能及的范围内应该大力支持。做H5移动开发,并没有原生APP开发那样,大部分内容都可以自定义,移动端H5页面受手机系统的影响,不同的浏览厂商对表单元素的渲染效果差异很大。

9159.com 5

@media all and (orientation:portrait){  }

9159.com 6

实例代码

通过以上的3项优化后,告别了矮龊穷,适当锦上添花,得到炫酷的视觉效果~

9159.com 7

代码:

9159.com 89159.com 9

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>自定义表单元素的外观</title>

<style type="text/css" media="all">
{padding:0;margin:0;}
input,select,textarea,button{outline:none;}
.form{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;}
.form input::-webkit-input-placeholder,.form textarea::-webkit-input-placeholder{color:#AAAAAA;}
.form input:focus::-webkit-input-placeholder,.form textarea:focus::-webkit-input-placeholder{color:#EEEEEE;}
.form fieldset{border:none;}
.form legend{display:none;}
.form-line{padding-bottom:10px;}
.form-line .info{padding-left:10px;font-size:12px;color:#999999;margin-top:6px;}
.form-line .label{display:block;padding-left:10px;font-size:12px;color:#666666;margin-bottom:6px;}
.form-line .element{padding-bottom:6px;}
.form-btn{margin-top:30px;}
.ico-clear{display:inline-block;width:22px;height:22px;padding:11px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM7SURBVFhH1ZnNbhoxEMfpuXmL9l2a3qrk0DR9nYi8QA99hJJTlWM4cOFDAg4E8VFAXBBwCpWKUFELwp3/xouWrT/GaycRK1nZsGPPz7Mz47E3l/O4Wq3W60ql8q5Wq Wr1ep3aj26X9DfP2jyvodnUuYUfTxUuncVQrwigFMCKFD7TU04NvQpYAyM5U7g0IMUnZGiliOgdkIYi97QBwcEnmi5XH5Dg9 FAk2Pg7Ghg0djkaLBP9KAv54KNh5X6rjIDC199eqpQRXWvnL2bQn75blhE/q OkHT67l QdgoSMHAcg8Svnhp2Fg/ZZBPRmiZDbQBRklftNtt17zrI780Zg9T6hqPx RWj9dkMvGB2PcdDAZitVqJ6XRqytV3SitjUdC5QrPZFLvdbg8cAno0Gh2MOZvNTEY4O4CWWUG7gtXrdbHZbA6AfaDTsBgLltYZjN78/UHWkAWM8TV3Oh2x3W69oVWweHtwD1Owo/bYW5n  cbJDL7QOlj8btMPxggY5R4Jr20d4udZoX1gpe51VJpy3CE9GVfoALDRGwBrjm7yXOsm5bjQoWCl7jyAb7MAo48NOjAsrHwL4H5WYBP0YrH4L3cjG3ACzMDTz1H0PfgAm6CTOTAALAqiBwBjs2hNKzYZnXsAOgQs9IM1GDAGRE2guuAetglznsfA3i4BZaoAS8KHKJgil/ANOg5swCqv75XWdLDwWbhHiNoj5SpRWsu0cJhg49Rly9Mcv03J5BF0OMVxDgruohASOqrYXIsfjmXTBggE/Vj84OKWl1lgY/gA0IVkPcxyC64b6FzME/r9Hlhuke5NvjwcDoPUBjrobrfL3yKBnGC1m1BMBHuuULWBCrrX65kC/1y5czZt85PLbojaANDxxnY n5tgi9rDFBxakDWXOtcANCxt2zBy02Sj0RA4nDHIL8mIb42nP9T5eI6q4pkc1WEgoI/uuDUBfRwH2kknJ/e4fK5PBqTnM tM2CaESKVgLHKjP4Nc0ZoNbJCq5wRyjoO5DEDK1CU/oakXhSyAqj4yIFF73FBbZ4BHnxuUik7fMUJMoFQqnch6GpsAHMj0qf2k3/6i4Z7aDzxDqoQs vjo/gcu5hKkyDDBRAAAAABJRU5ErkJggg==") center center no-repeat;background-size:22px 22px;text-indent:-9999px;}
.form .ico-clear{position:absolute;top:1px;right:0;z-index:1;display:none;}
.form .show-clear .ico-clear{display:inline-block;}
.input{border:1px solid #BBBBBB;border-radius:4px;position:relative;}
.input .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;border-radius:4px;}
.select{border:1px solid #BBBBBB;border-radius:4px;position:relative;}
.select .text{-webkit-appearance:none;appearance:none;border:none;font-size:18px;padding:12px 10px;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background-color: #FFFFFF;color:#333333;border-radius:4px;}
.arrow-down{display:inline-block;cursor:pointer;width:13px;height:9px;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAASCAYAAABFGc6jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC7SURBVEhLtdPdEUAwDABgK9jJClawgj61r1awghXsZAUS19JfkRR3jtMmXzVp03iX1no0xkz N8k75JkhT5eNtcgOE/AWYxbBHFuCRYgY8xCX48YKCBvLICGG22S3yw3ET3IbIX55ygGLWM96EX/1WLM3iFKqvRpDgrERp3EwMcLBqhEGVmqcHQsf1IQ68bDqgejGBLu6i0oejzOxhZs/mP8Sq0OcSGDfIAT2LVLA/kG81u/xHFUV/s/gAw305R72o0XTAAAAAElFTkSuQmCC") 0 0 no-repeat;background-size:13px 9px;text-indent:-9999px;}
.select .arrow-down{position:absolute;right:12px;top:20px;}
.checkbox,.radio{width:10px;height:10px;background-color:#CCCCCC;margin-right:4px;-webkit-appearance:none;}
.radio{-webkit-border-radius: 5px;border-radius: 5px;}
.checkbox{vertical-align:-4px;}
.checkbox:checked,.radio:checked{background-color:#333333;}

/* 禁用select默认下拉箭头 */
select::-ms-expand{display:none;}
/* 禁用PC端表单输入框默认清除按钮 */
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none}
/* 禁用radio和checkbox默认样式 */
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display: none;}
</style>
</head>
<body style="padding: 10px;">
<form class="form">
<fieldset>
<legend>表单标题</legend>

<div class="form-line">
    <label for="" class="label">文本输入框</label>
    <div class="input show-clear"><!-- 表单输入内容后,添加class:show-clear 可显示清除按钮 -->
        <input type="tel" class="text" placeholder="信用卡卡号">
        <a href="javascript:" class="ico-clear">清除</a>
    </div>
</div>

<div class="form-line">
    <label for="radio1" class="label"><input type="radio" class="radio" id="radio1" name="radio">单选按钮1</label>
    <label for="radio2" class="label"><input type="radio" class="radio" id="radio2" name="radio">单选按钮2</label>
</div>

<div class="form-line">
    <label for="checkbox1" class="label"><input type="checkbox" class="checkbox" id="checkbox1" name="radio">复选按钮1</label>
    <label for="checkbox2" class="label"><input type="checkbox" class="checkbox" id="checkbox2" name="radio">复选按钮2</label>
</div>

<div class="form-line">
    <label for="" class="label">下拉列表框</label>
    <div class="select">
        <select name="" id="" class="text">
            <option value="">所在省份</option>
            <option value="">广东</option>
            <option value="">北京</option>
        </select>
        <a href="javascript:" class="arrow-down"></a>
    </div>
</div>

</fieldset>
<form/>

</body>
</html>

View Code

测试demo请进入

}

从上图我们可以看出:
表单输入框有默认的内阴影
单选框和复选框有默认的边框和选中状态
选择列表有默认下拉箭头

二、使用伪元素改变 IE10 表单元素默认外观

上个月,为了适配微信 winphone 5.0 版本的 IE10 浏览器,我做了一些对 IE10 兼容的测试,并写了《迎接微信winphone 5.0 版本的IE10样式兼容》一文,之前处理 IE10 表单元素的默认外观是采用透明度为 opacity:0 的写法来重置表单的外观,这个办法使用起来有点复杂,对表单内容的输入,需要做额外的处理。近期浏览IE开发人员指南.aspx)的官网,了解到 IE10 对表单元素的默认外观也新增了伪元素来处理,也算是向前看齐,可能是因为 winphone 用户少,大家目前只做好 webkit 做兼容,对 winphone 兼容缺少了关注,今天分享下 3 个常用的伪类元素。

禁用 select 默认下拉箭头

 9159.com 10

::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
display: none;
}

}

webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观,该属性非常强大,适合大部分标签,这对于 webkit 的页面优化带来极大的帮助。

禁用 radio 和 checkbox 默认样式

letscrollTop_=document.body.scrollTop

select::-ms-expand {display: none;}

那么,如何改变表单元素的外观呢,由于浏览器厂商不同,对 webkit 和 IE10 的处理方式也不同~

document.body.scrollTop=scrollTop_;

禁用表单input、select元素的默认外观

  • 表单输入框有默认的内阴影
  • 单选框和复选框有默认的边框和选中状态
  • 选择列表有默认下拉箭头

function isWeixin(){

9159.com 11

一、使用 appearance 改变 webkit 浏览器的默认外观

webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观,该属性非常强大,适合大部分标签,这对于 webkit 的页面优化带来极大的帮助。

禁用表单input、select元素的默认外观

input,select{
-webkit-appearance:none;
        appearance:none;  
}

更多 -webkit-appearance 的介绍,这里推荐这篇文章《使用CSS3的appearance属性改变元素的外观》,对它有详细的讲解。

window.removeEventListener('touchmove',forbidScroll,false);

input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear{
display: none;
}

function deviceType(){

禁用 radio 和 checkbox 默认样式

//ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩;

更多 -webkit-appearance 的介绍,这里推荐这篇文章《使用CSS3的appearance属性改变元素的外观》,对它有详细的讲解。

},

input,select{-webkit-appearance:none; appearance:none; }

if(ua.indexOf(agent[i])>0){

9159.com 12

document.querySelector('html').style.position='static';

禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮,::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

}// 也可以* { -webkit-tap-highlight-color: rgba(0,0,0,0); } winphone<meta name="msapplication-tap-highlight" content="no">

结束语

document.querySelector('html').style.overflow='hidden';

9159.com 13

})

9159.com 14

//小结

::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值,设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

a,button,input,textarea {

下图为 iphone4s 、魅族 android4.4 、诺基亚 winphone8 三部测试机下4种不同表单元素的默认外观展现。

fastclick可以解决在手机上点击事件的300ms延迟

转摘自:http://www.cnblogs.com/PeunZhang/p/3522603.html

letaDelete=document.querySelectorAll('.delete');

一、使用 appearance 改变 webkit 浏览器的默认外观

document.querySelector('html').style.top=-document.body.scrollTop 'px';

那么,如何改变表单元素的外观呢,由于浏览器厂商不同,对 webkit 和 IE10 的处理方式也不同~

-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符

代码:

$(window).one('touchstart', function(){

由于电脑没有安装 IE11,不知道微软在 IE11 的版本有无支持 apprearance ,如果有,那么标准也算是出来啦,对全世界都好,如果say no,只能说:呵呵,你妹的!!!
如今手机浏览器厂商前缀无非 -webkit 和 -ms ,webkit 很明显占据了的优势,虽然这样,但我们也不能忽视了微软的 winphone ,毕竟有一定的用户就不可忽视它的价值,只希望它们早日达成一致,向标准靠齐~

//微信下兼容处理

关于 IE10 伪元素的介绍,大家可以关注IE10官网伪元素 (Pseudo-elements),讲得非常详细~
实例代码
通过以上的3项优化后,告别了矮龊穷,适当锦上添花,得到炫酷的视觉效果~

zepto的touch模块,tap事件也是为了解决在click的延迟问题

@media all and (orientation:landscape){  }

document.querySelector('body').style.overflow='hidden';

});

//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

functionforbidScroll(e){

document.addEventListener("WeixinJSBridgeReady", function () {

二、winphone下,使用伪元素改变表单元素默认外观

<meta name="x5-orientation" content="portrait"/>//qq-x5

//横屏时样式

var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';

for(var i=0; i

    2.禁用radio和checkbox默认样式,::-ms-check修改表单复选框或单选框默认图标,设置隐藏并使用背景图片来修饰input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:none; }

window.addEventListener('touchmove',forbidScroll,false)

优先播放音乐bg.ogg,不支持在播放bg.mp3

解决:目前只是在uc与qq-x5内核上解决啦

4、移动端在点击事件上的延迟(在iOS上是300ms)onclick事件:

orientInit();

e.preventDefault&&e.preventDefault();

}

letsong=_this.state.songlist;

目前在ios11上不能用

var_this=this;

}

e.returnValue=false;

})

10、JS判断微信浏览器

aDelete[index].style.backgroundImage=`url(${require(".lete2.png")})`;

return false;

return true;

document.querySelector('html').style.position='fixed';

     1.禁用select默认箭头,::-ms-expand修改表单控件下拉箭头,设置隐藏并使用背景图片来修饰select::-ms-expand{display:none; }

});

aDelete[index].style.backgroundImage=`url(${require(".lete1.png")})`;

window.removeEventListener('touchmove',forbidScroll,false)

_this.setState({

<meta http-equiv="pragma" content="no-cache">

//JS处理

},false)

12、弹层后面的内容滚动

11、页面缓存设置

deleteSong(key,id,index,e){

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){

})

-webkit-appearance:none;

//特殊说明:有些机型去除不了,如小米2。对于按钮类还有个办法,不使用a或者input标签,直接用div标签

e.stopPropagation&&e.stopPropagation();

break;

3、在ios系统上animation-play-state/* Safari 4.0 - 8.0 */不好使:

document.querySelector('body').style.overflow='initial';

8、audio元素和video元素在ios和andriod中无法自动播放

document.querySelector('html').style.position='static';

songlist:song

confirmAlert({

var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

var ua = navigator.userAgent;

9、JS判断设备

2、网页在手机上强制横屏:

//winphone系统,点击标签产生的灰色半透明背景,能通过设置去掉;

cancelLabel:'取消',// Text button cancel

6、美化表单元素

music.play();

setTimeout(orientInit, 100);

<meta http-equiv="expires" content="0">

}else{

-webkit-tap-highlight-color: rgba(0,0,0,0);

document.querySelector('body').style.overflow='initial';

onCancel:()=>{

message:'',// Message dialog

    3.禁用pc端表单输入框默认清除按钮,::-ms-clear修改清除按钮,设置隐藏并使用背景图片来修饰input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:none; }

var ua = navigator.userAgent.toLowerCase();

//android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果;

document.querySelector('html').style.overflow='initial';

//JS绑定自动播放(操作window时,播放音乐)</audio>

}

},

}else{

//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常

//音频,写法二<audio controls="controls">

}, false);

}

document.querySelector('html').style.overflow='initial';

//这里是竖屏下需要执行的事件

}

//竖屏时样式

function orientInit(){

aDelete[index].style.backgroundImage=`url(${require(".lete1.png")})`;

document.body.scrollTop=scrollTop_;

window.addEventListener('resize', function(){

//这里是横屏下需要执行的事件

5、点击元素产生背景或边框怎么去掉

title:'确定删除歌曲吗?',// Title dialog

<meta http-equiv="cache-control" content="no-cache">

1、input框在ios上背景颜色在真机上有色差

cursor:pointer;

解决:input[type=button], input[type=submit], input[type=file], button{

<!--清除缓存--!>

returnfalse;

song.splice(index,1);

}

confirmLabel:'确认',// Text button confirm

if(ua.match(/MicroMessenger/i)=='micromessenger'){

if(orientChk =='lapdscape'){

music.play();

一、使用appearance改变webkit浏览器的默认外观input,select{-webkit-appearance:none;appearance:none; }

解决 使用动画帧的方法来,把他切割成多个动画帧

优先播放音乐bg.ogg,不支持在播放bg.mp3

7、屏幕旋转的事件和样式

13、

document.querySelector('body').style.overflow='hidden';

//音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

onConfirm:()=>{

}

解决方案:

本文由9159.com发布于前端,转载请注明出处:【9159.com】使用appearance属性改变元素的外观,做

关键词: 9159.com