前端CSS基础——表单元素单选框的美化

我们先生成单选框

     <label class="radio-item"><input type="radio" name="a"><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span>女</span></label>

生成的单选框是这样的
看起来并不美观，但是表单元素又是H5默认样式，没办法更改单选框的属性，那么如何更改单选框样式呢
其实有很多种方法，现在我们来利用CSS更改表单单选框的样式

首先在input后面添加空的span样式，然后将空的span样式生成新的单选框，再把input单选框隐藏就行了。

      <label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>男</span></label><label class="radio-item"><input type="radio" name="a"><span class="radio"></span><span>女</span></label>

添加css样式

 .radio-item .radio{//定义单选框边框display: inline-block;width: 12px;height: 12px;border:1px solid #999;border-radius: 50%;}.radio-item input:checked+.radio{//更改单选框选中颜色border-color:#008c8c ;}.radio-item input:checked+.radio::after{//在选中单选框里面添加一个小圆心content: "";display: block;width: 6px;height: 6px;border-radius: 50%;background: #008c8c;margin-top:3px ;margin-left: 3px;}.radio-item input:checked~span{//将文字颜色变成定义颜色color: skyblue;}.radio-item input[type="radio"]{//隐藏单选框display: none;}

效果图

前端CSS基础——表单元素单选框的美化相关推荐

[css] css怎么更改表单的单选框或下拉框的默认样式？
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
HTML基础--表单元素知识
学习目标: 通过简单的实践,学习基本的 HTML FORM 标签,理解各种表单元素的使用场景,并且掌握表单一系列基本验证方式. 学习内容: 1.HTML表单 HTML 表单用于搜集不同类型的用户输入. ...
html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
零基础HTML入门教程(17)——表单的单选框和复选框
本章目录 1.任务目标 2.单选框radio 3.复选框checkbox 4.小结 1.任务目标我们上一小结学习了,密码输入框和文本输入框,我们这一小结学习复选框和单选框. 2.单选框radio 单 ...
form表单的单选框
单选框其实很简单,只需要两个主要属性定义就好,看效果图: 代码如下: <!DOCTYPE html> <html> <head><title>form表 ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
Html5表单元素-搜索框和上传文件框
1.search - 搜索框 element/form/input/search.html <!doctype html><html><head> <titl ...
html中表单元素中的单选框,Html表单元素及表单元素详解
大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素--文本框 5.表单元素button 6.表单元素--单选.多选 7.表单元素--select 8.表单元素--textarea ...
前端基础：通过表单元素实践《健康体检单》
前端基础:通过表单元素实践<健康体检单> HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 一.项目说明该项目是进行表格布局表 ...
前端：HTML/06/表单，表单元素（单行文本域，单行密码域，单选按钮，复选框，下拉列表，文本区域，上传文件域，各种按钮，隐藏域，lt;caption表格标题）
表单<form>(块元素) 表单的概念:表单主要用来获取用户数据(信息),如:注册表单, 查询表单,登录表单. 表单的工作原理: 浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行 ...

前端CSS基础——表单元素单选框的美化

前端CSS基础——表单元素单选框的美化相关推荐

最新文章

热门文章