可以使用css的方式让input不能输入文字吗10bet?

来源:http://www.chinese-glasses.com 作者:Web前端 人气:76 发布时间:2020-03-24
摘要:时间: 2019-11-12阅读: 127标签: input 时间: 2019-08-12阅读: 169标签: 样式 在使用一个js插件时,不想让用户点击input输入和触发那个下拉框,用css的方式有什么方法?readonly和disabled都要写到标

时间: 2019-11-12阅读: 127标签: input

时间: 2019-08-12阅读: 169标签: 样式

在使用一个js插件时,不想让用户点击input输入和触发那个下拉框,用css的方式有什么方法?readonly和disabled都要写到标签上,但input都是这个插件生成的,有什么好的方法解决吗?

原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给input元素设置为透明,然后通过定位让用户看到的是label元素,利用css的原生属性来判断用户的操作,设置选中后的label样式,即

最简单的一个css方法是:

input[type=checkbox]:checked+label{}
pointer-events: none;

一、利用css3伪元素实现样式修改

html:

 p您的性别:/p div  input type="radio" name="sex" label for="sex1"/label span男/span /div div  input type="radio" name="sex" label for="sex2"/label 女 /div

css:

.radio-sex { position: relative; display: inline-block; margin-right: 12px;}.radio-sex input { vertical-align: middle; margin-top: -2px; margin-bottom: 1px; /* 前面三行代码是为了让radio单选按钮与文字对齐 */ width: 20px; height: 20px; appearance: none;/*清楚默认样式*/ -webkit-appearance: none; opacity: 0; outline: none; /* 注意不能设置为display:none*/}.radio-sex label { position: absolute; left: 0; top: 0; z-index: -1; /*注意层级关系,如果不把label层级设为最低,会遮挡住input而不能单选*/ width: 20px; height: 20px; border: 1px solid #3582E9; border-radius: 100%;}.radio-sex input:checked+label { background: #3582E9;}.radio-sex input:checked+label::after { content: ""; position: absolute; left: 8px; top: 2px; width: 5px; height: 12px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg);}

10bet,优点:充分借助了CSS3的优势,无需使用js和图片,仅用纯CSS3就可搞定

缺点:兼容性较差,仅支持IE9+

html

 div  input type="radio" name="zhiye" value=""/ label i /i i /i /label span视觉设计师/span /div div  input type="radio" name="zhiye" value=""/ label i /i i /i /label span交互设计师/span /div div  input type="radio" name="zhiye" value=""/ label i /i i /i /label span前端工程师/span /div

CSS样式

.radio-item { position: relative; width: 132px; height: 44px; line-height: 44px; float: left; margin-right: 12px;}.radio-item input { width: 120px; height: 44px; opacity: 0; appearance: none; position: absolute; left: 0; top: 0;}.radio-item label { position: absolute; left: 0; top: 0; width: 120px; height: 36px; line-height: 36px; padding: 4px 6px; background-color: #EFEFEF; border-radius: 6px; z-index: -1; display: flex; align-items: center;}.radio-item label i { display: inline-block; margin-left: 6px;}.radio-item label i.disc { width: 8px; height: 8px; background: #333; border-radius: 100%;}.radio-item label i.active { width: 12px; height: 6px; border-left: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(-45deg); display: none;}.radio-item span { margin-left: 32px;}.radio-item input:checked + label { background: #3698DB; color: #FFFFFF;}.radio-item input:checked + label i.disc { display: none;}.radio-item input:checked + label i.active { display: block;}.radio-item input:checked + label + span { color: #FFFFFF;}

二、利用图片实现样式修改

实现思路 1.设置input 属性hidden对该input进行隐藏

input type="radio" name="type" value="1" checked hidden/

本文由10bet发布于Web前端,转载请注明出处:可以使用css的方式让input不能输入文字吗10bet?

关键词:

上一篇:没有了

下一篇:没有了

频道精选

最火资讯