博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
去除表单元素的默认样式
阅读量:5275 次
发布时间:2019-06-14

本文共 839 字,大约阅读时间需要 2 分钟。

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

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

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

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

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

禁用 select 默认下拉箭头

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

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

禁用 radio 和 checkbox 默认样式

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

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

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

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

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

 

转载于:https://www.cnblogs.com/leifeng-hm/p/4011609.html

你可能感兴趣的文章
实验一 绘制金刚石图案
查看>>
白话SpringCloud | 第五章:服务容错保护(Hystrix)
查看>>
fabricjs 高级篇(自定义类型)
查看>>
jQuery之end()和pushStack()
查看>>
springboot入门_shiro
查看>>
Bootstrap--响应式导航条布局
查看>>
【好程序员笔记分享】——下拉刷新和上拉加载更多
查看>>
多线程,多进程,协程
查看>>
Hacker News与Reddit的算法比较
查看>>
Learning Python 009 dict(字典)和 set
查看>>
JavaScript中随着鼠标拖拽而移动的块
查看>>
HDU 1021 一道水题
查看>>
进击的 JavaScript(六) 之 this
查看>>
The operation couldn’t be completed. (LaunchServicesError error 0.)
查看>>
php每天一题:strlen()与mb_strlen()的作用分别是什么
查看>>
编程中定义的方法报异常问题
查看>>
使用STM32F103ZET霸道主板实现SD卡的读写(非文件系统)
查看>>
工作中收集JSCRIPT代码之(下拉框篇)
查看>>
《转载》POI导出excel日期格式
查看>>
code异常处理
查看>>