CSS Radio Button

2025年3月26日 | 阅读 3 分钟

单选按钮是一个 HTML 元素，用于从用户那里获取输入。虽然很难直接样式化单选按钮，但使用伪元素可以更轻松地对其进行样式设置。当需要从一组项目中选择一个时，会用到单选按钮。

这个 HTML 元素通常在每个网站上都能看到，但如果不进行样式设置，它们在每个网站上看起来都差不多。因此，对其进行样式设置可以使我们的网站与众不同且更具吸引力。使用 CSS 设计单选按钮是一项有趣且富有创意的任务，它将为默认的单选按钮带来全新的外观。

要创建自定义单选按钮，我们需要编写 HTML 标记，而要进行样式设置，则需要编写 CSS。

通过使用一些插图可以清楚地说明单选按钮的样式。让我们看一些相关的插图。

示例

在此示例中，我们使用了“~”，它是同级组合器。它会选择所有位于前一个选择器之后的元素。我们还使用了伪类 :hover 来在用户将光标移到单选按钮上时为其设置样式。

<!DOCTYPE html>
<html>
<style>
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 25px;
}

/* Hide the default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* custom radio button */
.check {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: lightgray;
  border-radius: 50%;
}

.container:hover input ~ .check {
  background-color: gray;
}

.container input:checked ~ .check {
  background-color: blue;
}

.check:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .check:after {
  display: block;
}

.container .check:after {
 	top: 8px;
	left: 8px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: white;
}
</style>
<body>

<h1> Example of Custom Radio Buttons</h1>
<h2> Select your category </h2>
<label class="container">GEN
  <input type="radio" name="radio" checked>
  <span class="check"></span>
</label>
<label class="container">OBC
  <input type="radio" name="radio">
  <span class="check"></span>
</label>
<label class="container">SC
  <input type="radio" name="radio">
  <span class="check"></span>
</label>
<label class="container">ST
  <input type="radio" name="radio">
  <span class="check"></span>
</label>

</body>
</html>

为了更清楚地理解这一点，我们将看到另一个关于样式化单选按钮的演示。使用 CSS 样式化单选按钮可以为网站带来专业的外观。

示例 2

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 

.container{
    float: left;
    margin: 10px;
}
.right{
    float: left;
    margin: 10px;
	color: blue;
	font-size: 20px;
    font-weight:bold;
}
.radio {
    width: 20px;
    position: relative;
}
.radio label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0,0,0,0.5);
    border: 1px solid black;
}
.radio label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    border: 6px solid blue;
    border-radius: 50px;
    opacity: 0;
    }
.radio label:hover::after {
    opacity: 0.3;
    }
.radio input[type=radio] {
    visibility: hidden;
}
.radio input[type=radio]:checked + label:after {
     opacity: 1;
    }  
        </style> 
    </head> 
    <body> 
        <h1> Example of CSS radio buttons </h1> 
	<h2> Click the following radio buttons to see the effect </h2>

<div class="container">
<div class="radio">
<input type="radio" value="Male" name='gender' id='male' />
<label for="male"></label>
</div>
</div>
<div class="right">Male</div>
 
<div class="container">
<div class="radio">
<input type="radio" value="Female" name='gender' id='female' />
<label for="female"></label>
</div>
</div>
<div class="right">Female</div>
        </center> 
    </body> 
</html>

下一个主题CSS 上标和下标

CSS Radio Button

示例

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Radio Button

示例

示例 2

相关帖子

CSS text-indent

CSS order

CSS 按钮

CSS background-origin

CSS Float

Less CSS

CSS 最新版本

page-break-inside 属性

CSS root

CSS letter-spacing

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器