将html的radio单选框自定义样式为正方形和对号的介绍_F11

分享到

将html的radio单选框自定义样式为正方形和对号的介绍

HTML/Xhtml 来源：互联网作者：佚名发布时间：2023-12-22 22:22:12 人浏览

摘要

将html的radio单选框自定义样式为正方形和对号背景：如何能把html的input type=radio name=option改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。默认的样式太丑了默认

将html的radio单选框自定义样式为正方形和对号

背景：

如何能把html的<input type="radio" name="option">改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。默认的样式太丑了

默认样式：

在这里插入图片描述

自定义样式：

在这里插入图片描述

实现代码

<!DOCTYPE html>

<html>

<head>

<style>

input[type="radio"] {

display: none;

}

.square-radio {

display: flex;

position: relative;

width: 20px;

height: 20px;

border: 2px solid #333;

cursor: pointer;

}

.square-radio::after {

content: "?";

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 14px;

color: #333;

display: none;

}

input[type="radio"]:checked + .square-radio::after {

color: #2196F3;

display: block;

}

</style>

</head>

<body>

性别：

<label>

男

</label>

<label>

女

</label>

</div>

</body>

</html>

您可能感兴趣的文章 :

原文链接 :

Tag : HTML(132)radio(4)

圣诞节制作一颗HTML的圣诞树介绍

来到圣诞节了，那么就可以制作一颗HTML的圣诞树送给朋友，没有编程基础的小白也可以按照步骤操作也可以运行起来代码的一、vscode里面运
将html的radio单选框自定义样式为正方形和对号的

将html的radio单选框自定义样式为正方形和对号背景：如何能把html的input type=radio name=option改成自定义的样式呢？比如想要把他变成正方形，
HTML文档类型声明标签介绍(入门级教程)

一、文档类型声明标签 /DOCTYPE其作用就是告诉浏览器使用哪种HTML版本来显示网页。代码：/DOCTYPE html的意思是采用HTML5版本来显示网页需要
HTML介绍以及常用代码总结介绍

HTML 网页基础 html(Hyper Text Markup Language)超文本标记语言，发明者: Tim Berners-lee html主要是定义网页内容和结构的。html是编写网页的语言。
HTML嵌入CSS样式的四种实现方法

CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中，大致分为如下四种方法：行内样式：使
html中的target属性介绍

target target属性可选四种属性值 1、target=_self, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转
HTML的img元素无法显示base64图片的原因介绍

如果使用 base64 编码的图片在 HTML 的 img 元素中无法显示，可能有以下几个原因： 1、语法错误：img 元素中的 src 属性必须以 data: 开头，后面
html实现iframe全屏的代码

html浏览器全屏操作，基于jquery iframe全屏、指定标签全屏实现 css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /** 全屏*/ .lay-dbclick-box
html页面点击按钮实现页面跳转功能

方法1、在button标签外嵌套一个a标签，利用超链接进行跳转； 1 2 3 a href=https://www.baidu.com/ target=_blank button进入baidu首页/button /a 方法2、在but
HTML点击按钮button跳转页面的四种方法介绍

其实我比较喜欢第一种方法 1 button onclick=window.location.href=../routeEdit/index.html type=button id=add新增/button 正文方法一：在button标签中加上onclick属