1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html把单选框改变样式

html把单选框改变样式

时间:2019-07-20 19:28:48

相关推荐

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的基本语法

参考博客:

/xinjie-just/p/730.html (这个非常关键)

/mqy1023/article/details/78700433

/qq_34182808/article/details/79992465

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。