html把单选框改变样式

以下是成功的源代码!

<head><style type="text/css">/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/input[type="radio"] + label::before {content: "\a0";  /*不换行空格*/display: inline-block;vertical-align: .2em;width: .8em;height: .8em;margin-right: .2em;border-radius: .2em;background-color: silver;text-indent: .15em;line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/}input[type="radio"]:checked + label::before {content: "\2713";background-color: yellowgreen;}input {position: absolute;clip: rect(0, 0, 0, 0);}input[type="radio"]:focus + label::before {box-shadow: 0 0 .1em .1em #58a;}input[type="radio"]:disabled + label::before {background-color: gray;box-shadow: none;color: #555;}</style>
</head>
<body background="1.jpg"  style="padding: 10%"><div><input type="radio" id="awesome0" name="mode" /><label for="awesome0">Awesome!</label><input type="radio" id="awesome1" name="mode" /><label for="awesome1">Awesome!</label><input type="radio" id="awesome2" name="mode" /><label for="awesome2">Awesome!</label></div>
</body>

上面的有一行代码是 content: ‘\2713’ 这个是对勾，还可以换成其他的。

要理解上面的代码需要懂css的基本语法
参考博客:
https://www.cnblogs.com/xinjie-just/p/7302020.html （这个非常关键）
https://blog.csdn.net/mqy1023/article/details/78700433
https://blog.csdn.net/qq_34182808/article/details/79992465

html把单选框改变样式相关推荐

html php单选框,html单选框选中状态 html 怎么设置单选框的样式
Photoshop中 hard round,airbrush pen opacity fl硬圆喷枪软圆希望喜欢, 用php怎么检查html中的单选框是否被选中 html中单选按钮控件标签用法解析及 ...
CSS修改html单选框radio样式
html单选框默认样式比较单一,结合网上相关内容在此做个关于修改radio样式的记录. html结构如下: <input type="radio" name="zo ...
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...
input复选框改变样式
今天有人问我input复选框要怎么改变样式,查了一下,特整理下来: <input type="checkbox">input[type="checkbox&q ...
普通html和vue单选框的样式,vue2实现自定义样式radio单选框
先上效果主编已回复: {{item.label}} js: data() { return { radio: '1', radios:[ { label: '是', value:'1', isChe ...
单选框_vue实现单选框自定义样式
话不多说先看效果再看代码,后期推出多选和其他的代码 <style lang="less" scoped> .CancelOrderCause-layout {font- ...
element-ui单选框按钮的样式改成勾勾
默认的单选框的样式是这样的我想换成图标是勾勾的. // 全局单选框图标换成勾勾 #app /deep/ .el-radio__input.is-checked .el-radio__inne ...
elemenUI 2.x：单选框控制日期选择器的切换
ElementUI 日期选择器的切换实现方式一:同一个日期组件,通过修改属性实现 <!DOCTYPE html> <html lang="en">< ...
CSS3-实现单选框radio的小动画
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

html把单选框改变样式

html把单选框改变样式相关推荐

最新文章

热门文章