html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)

html:

选项一

选项二

css:

div {

position: relative;

line-height: 30px;

}

input[type="radio"] {

width: 20px;

height: 20px;

opacity: 0;

}

label {

position: absolute;

left: 5px;

top: 3px;

width: 20px;

height: 20px;

border-radius: 50%;

border: 1px solid #999;　　　　　　　cursor: pointer;

}

/*设置选中的input的样式*/

/* + 是兄弟选择器,获取选中后的label元素*/

input:checked+label {

background-color: #fe6d32;

border: 1px solid #fe6d32;

}

input:checked+label::after {

position: absolute;

content: "";

width: 5px;

height: 10px;

top: 3px;

left: 6px;

border: 2px solid #fff;

border-top: none;

border-left: none;

transfo

html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)相关推荐

纯CSS菜单样式，及其Shadow DOM，Json接口实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识先放一张效果图 Part 1:纯CSS菜单样式先放样式代码 1 <sty ...
自定义常用input表单元素二：纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
jquery给单选按钮赋值_jquery循环遍历radio单选按钮，并设置选中状态
背景:自己在做项目过程中遇到的问题,现在记录一下. 需求:在ajax获取后台数据的之后,需要根据获取的数据对页面中的radio单选按钮进行选中状态设置因为自身js功底欠佳,所以耽误了点时间,现在把方 ...
python做一个窗口样式_python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法...
本文借用HTML的css语法,将样式表应用到窗口部件.这里只是个简单的例子,实际上样式表的语法很丰富. 以下类似于css: StyleSheet = """ QCombo ...
9款漂亮的纯css字体样式
样式: 代码: <html> <head> </head> <style>body{text-align: center;}.hcqFont{posit ...
html通过id设置css样式,JavaScript修改style,id,class等css属性样式方法总结
JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 . JavaScript修改CSS有4种方法: 修改节点style(内联样 ...
常见Z纯CSS小样式合集（三角形）
三角形 .sanjiao{ width:0px; height: 0px; overflow: hidden; border-width: 100px; border-color: transpare ...
7款漂亮的纯css字体样式
转载于:https://blog.csdn.net/aa19891204/article/details/81021591 <!DOCTYPE html> <html>< ...
html单选按钮自定义,css | radio单选按钮样式自定义
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的. 单选按钮最常见的地方 ...

html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)

html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)相关推荐

最新文章

热门文章

html单选按钮样式 正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)

html单选按钮样式 正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)相关推荐

最新文章

热门文章

html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)

html单选按钮样式正方形,HTML自定义radio单选按钮(纯css版,样式可以随便改变)相关推荐