HTML/CSS 单选框

代码：

<!DOCTYPE html>
<html lang="en"><head><meta name="keywords" content="zidingyi"><meta name="description" content="zidingyi"><meta charset="UTF-8"><title></title><style>.wrapper {width: 400px;margin-top: 20px;margin: 100px auto;padding: 0;list-style-type: none;}.wrapper li {margin-top: 10px;}.wrapper input[type="radio"] {/* 去掉input前面的圆点 */display: none;}.wrapper input[type="radio"] + label {display: block;width: 400px;height: 20px;line-height: 20px;font-size: 14px;}.wrapper input[type="radio"] + label::before {float: left; /*如果不浮动，就看不到这个红色的框框，因为::before是行内元素*/content: "";width: 20px;height: 20px;border: 1px solid red;margin-right: 10px;}.wrapper input[type="radio"]:checked + label::before {content: "√";text-align: center;color:#FFF;background-color:rgb(222, 134, 80);}.wrapper input[type="radio"][id="hello5"]:checked + label::after {content:"小伙子你的思想很危险！";font-size: 12px;color: red;display: inline-block;margin-left: 15px;}</style></head><body><ul class="wrapper"><li><input type="radio" name="hello" id="hello1"> <label for="hello1">周一学习</label></li><li><input type="radio" name="hello" id="hello2"> <label for="hello2">周二学习</label></li><li><input type="radio" name="hello" id="hello3"> <label for="hello3">周三学习</label></li><li><input type="radio" name="hello" id="hello4"> <label for="hello4">周四学习</label></li><li><input type="radio" name="hello" id="hello5"> <label for="hello5">周五休息</label></li></ul></body>
</html>

显示：

HTML/CSS 单选框相关推荐

纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
自学篇之--js 提取复选框和单选框的值和纯css的3D按钮
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="utf-8" co ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
[CSS]复选框单选框与文字对齐问题的研究与解决.
前言: 今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文 ...
h5配合css和js如何自定义单选框
既然是自定义单选框所以要清除原生的单选框样式 input, textarea { //清除所有input和textarea的原生样式border: 0;-webkit-appearance: none ...
[css] css怎么更改表单的单选框或下拉框的默认样式？
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
关于单选框以及复选框的css美化方法
在工作中,遇到单选框和复选框还是一件很头疼的事情.丑就算了,关键是各个浏览器都不一样,这非常让我头疼. 以前一直用JQUERY来解决这个问题.不过js解决复选框没有问题,解决单选框就有点拙荆见肘,需要 ...
html滚动选择框代码,如何使用最简单纯Css代码美化checkbox复选框、radios单选框和滑动按钮...
最简洁的代码美化复选框.单选框和滑动按钮效果预览 1. 复选框 .switch { margin: 20px 20px 0 0; display: flex; align-items: center ...
单选框加了css后显示不出来,layui radio 单选框效果显示不来解决方法
$("input[name=sex][value=女]").attr("checked", data.data.adminInfoEntity.adminInf ...

HTML/CSS 单选框

HTML/CSS 单选框

HTML/CSS 单选框相关推荐

最新文章

热门文章