改变表单元素的外观

ie10以下不支持

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

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

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

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

/* 禁用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;}

时间: 2024-08-14 04:25:33

改变表单元素的外观的相关文章

去除表单元素的默认样式

一.使用 appearance 改变 webkit 浏览器的默认外观 webkit 内核浏览器具备私有属性" -webkit-appearance "可以改变元素的外观,该属性非常强大,适合大部分标签,这对于 webkit 的页面优化带来极大的帮助. 禁用表单input.select元素的默认外观 input,select{ -webkit-appearance:none; appearance:none; } 二.使用伪元素改变 IE10 表单元素默认外观 禁用 select 默认下

表单元素

1.单行文本框<input type="text"/>(input 的type 属性的默认值就是"text") <input type = "text" name="名称"/> 以下是单行文本框的主要属性: size:指定文本框的宽度,以字符个数为单位:在大多数浏览器中,文本框的缺省宽度是20个字符. value:指定文本框的默认值,是在浏览器第一次显示表单或者用户单击<input type=&q

HTML5初探——新增的表单元素和属性

HTML5初探--新增的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 4

表单元素-select

1 (function(window,document,undefined){ 2 window.OperSelect = function(selector,option){ 3 var _select = document.querySelector(selector); 4 this.add = function(newoption,relOption){ 5 _select.add(newoption,relOption); 6 }, 7 this.remove = function(i

表单元素和表格

今天尝试去自己做表格,试了一下单元格合并,通过尝试我发现如果规定了高度在合并,那么删除后的表格高度为初始高度,如果想要改变只能改变删除之后剩余的单元格高度 <tr> <td rowspan="2" > </td> <td height="50"> </td> <td> </td> </tr> 而在同一个单元格我没有实现行与列的合并 <table width=&quo

jquery attr处理checkbox / select 等表单元素时的坑

先上html结构 <body> <form action=""> <input type="checkbox" id="checkedAll">全选/全不选<br> <input type="checkbox" name="items" value="足球">足球 <input type="checkbox&qu

HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. 例子:Facebook/Twitter 更新.估价更新.新的博文.赛事结果等. 浏览器支持 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer. 接收 Server

HTML5初步——新的表单元素和属性

HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5 移动Web开发指南</title> <style type="text/css"> h1, h2, h3, h4, h5, h6 { text-align: center; } input { width: 45

DOM表单元素

#表单元素 ##获取表单元素 form 1)document.forms[0]; 2) document.forms['id']; 3) document.forms['name']; 4) document.name的值; ##获取表单字段 首先拿到表单:let form = document.forms[0]; 1) form节点.element[下标]: 2)form节点.element['id的值']: 3) form节点.element['name的值']: 4) form节点.nam