html单选按钮自定义,css | radio单选按钮样式自定义

radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.

单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下:

性别：

男

女

保密

css改变radio按钮样式,这里使用了伪类(在css中一定要擅用伪类,能更好的实现功能):

.formSex input{

display: none;

margin-top: 10px;

}

.formSex label{

box-sizing: border-box;

position: relative;

margin-right: 34px;

margin-top: 10px;

}

.formSex label::before{

display: inline-block;

content: "";

width: 16px;

height: 16px;

border-radius: 50%;

border: 1px solid rgb(219, 219, 219);

margin-right: 6px;

vertical-align: bottom;

}

.formSex input:checked+label::before{

border: 1px solid #fff;

background-color: #fff;

}

.formSex input:checked+label::after{

display: inline-block;

content: "";

width: 18px;

height: 18px;

border-radius: 50%;

position: absolute;

left: 0;

bottom: 0;

background-color: #F60;

}

在不使用js的情况下就改变了radio的按钮样式了,既然是自定义样式,就可以随心情自己修改了,我这里实现的效果是这样的

image.png

html单选按钮自定义,css | radio单选按钮样式自定义相关推荐

css3自定义checkbox radio的样式
自定义input[type="radio"]的样式 vue input复选框checkbox默认样式纯css修改 vue 修改checkbox样式: <div class=& ...
如何自定义CSS滚动条的样式？
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
html滚动条样式自定义,如何自定义CSS滚动条的样式？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的 ...
自定义常用input表单元素二：纯css实现自定义radio单选按钮
这是接着上一篇纯css自定义复选框checkbox的第二篇,自定义一个radio单选按钮,同样,采用css伪类和"+"css选择器为思路,下面是预览图: 下面直入主题放代码:HTM ...
Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
JAVA如何自定义布局单选框,5分钟DIY一个自定义单选框单选按钮
转眼间2017年了,在这里祝大家2017都能展翅高飞.心想事成! 上次写器打好基下是求的响的可域适的一的近重交的博已经是两个月前了,这两个月七搞八搞学了不少黑科技日后必会分享给大家~下面咱们到二新, ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
php css下划线,如何自定义下划线的样式
下划线可以通过设置border-bottom以及background-image的值来自定义下划线的样式下划线一般在文本中是一条黑色的直线,那么如何改变下划线的样式呢?接下来在文章中将为大家详细介绍 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...

html单选按钮自定义,css | radio单选按钮样式自定义

html单选按钮自定义,css | radio单选按钮样式自定义相关推荐

最新文章

热门文章