Implementing custom radio and check box functions with pure CSS
|
1. Achieve the effect
2 Knowledge Points 2.1 <label> tag In HTML, the <label> tag is usually used together with the <input> tag. The <label> tag defines a label (marker) for the input element. The label element does not present any special effects to the user. The purpose of the <label> tag is to improve usability for mouse users. When the user clicks the content in the <label> tag, the browser automatically shifts the focus to the control associated with the label . The <label> tag is often used on radio buttons and check buttons. After using this tag, you can also select the corresponding radio button or check button by clicking the content in the label tag. <label> tag syntax format: <label for="Associated control id" form="List of form ids">Text content</label> The id of the associated control generally refers to the id of the input element. In HTML5, a new attribute form is added. The form attribute is used to specify the id list of one or more forms to which it belongs, separated by spaces. When the <label> tag is not in the form tag <form>, the form attribute needs to be used to specify the form to which it belongs. There are no special styling considerations for the <label> element - structurally, a <label> is a simple inline element, so styles can be applied in much the same way as a <span> or <a> element. 2.2 CSS3 box-shadow property The boxShadow property adds one or more drop shadows to a box. This property is a comma-separated list of shadows, each of which is specified by 2-4 length values, an optional color value, and an optional inset keyword. The value of omitted length is 0. grammar:
2.3 CSS3 transition property The transition property is used to set the element transition effect. The four abbreviated properties are: transition-property transition-duration transition-timing-function transition-delay grammar
2.4 CSS3 :checked selector The :checked selector matches every input element that is checked (only applies to radio buttons or checkboxes). 2.5 CSS element+element selector The element+element selector is used to select the element that immediately follows (not inside) the first element specified. For example: select all <p> elements that are immediately after a <div> element:
3 Code Implementation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#main {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
#wrap {
position: relative;
margin: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #9E9E9E;
position: relative;
box-shadow: 0 0 0 3px #dbe0e3;
transition: all 0.5s;
cursor: pointer;
}
.item img {
width: 20px;
height: 20px;
position: absolute;
bottom: 0px;
right: 0px;
opacity: 0;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
input:checked+label .item {
box-shadow: 0 0 0 3px #00a3ff;
color: #FFFFFF;
background-color: #efad4c;
}
input:checked+label .item img {
opacity: 1;
}
.content {
font-size: 30px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="main">
<h1>Multiple Selection</h1>
<div id="wrap">
<input type="checkbox" name="1" id="item1" />
<label for="item1">
<div class="item">
<div class="content">
1
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item2" />
<label for="item2">
<div class="item">
<div class="content">
2
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item3" />
<label for="item3">
<div class="item">
<div class="content">
3
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item4" />
<label for="item4">
<div class="item">
<div class="content">
4
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="checkbox" name="1" id="item5" />
<label for="item5">
<div class="item">
<div class="content">
5
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<h1>Single Choice</h1>
<div id="wrap">
<input type="radio" name="1" id="item6" />
<label for="item6">
<div class="item">
<div class="content">
1
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item7" />
<label for="item7">
<div class="item">
<div class="content">
2
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item8" />
<label for="item8">
<div class="item">
<div class="content">
3
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item9" />
<label for="item9">
<div class="item">
<div class="content">
4
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
<div id="wrap">
<input type="radio" name="1" id="item10" />
<label for="item10">
<div class="item">
<div class="content">
5
</div>
<img src="ico_checkon.svg" />
</div>
</label>
</div>
</div>
</body>
</html>This is the end of this article about how to implement custom radio buttons and check boxes with pure CSS. For more relevant CSS custom radio buttons and check boxes, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: The space is displayed differently in IE, Firefox, and Chrome browsers
>>: Implement a simple search engine based on MySQL
Recommend
JavaScript imitates Jingdong carousel effect
This article shares the specific code for JavaScr...
One minute to experience the smoothness of html+vue+element-ui
Technology Fan html web page, you must know vue f...
Docker connects to a container through a port
Docker container connection 1. Network port mappi...
How to draw a vertical line between two div tags in HTML
Recently, when I was drawing an interface, I enco...
Some simple implementation codes of the form element take registration as an example
Code implementation: Copy code The code is as fol...
Tomcat source code analysis of Web requests and processing
Table of contents Preface 1. EndPoint 2. Connecti...
Collection of 12 practical web online tools
1. Favicon.cc To create ico icon websites online,...
Use nginx.vim tool for syntax highlighting and formatting configuration nginx.conf file
I use tengine, the installation directory is /usr...
Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)
1. Flash plug-in package download address: https:...
In-depth explanation of the locking mechanism in MySQL InnoDB
Written in front A database is essentially a shar...
The front end creates and modifies CAD graphics details through JavaScript
Table of contents 1. Current situation 2. Create ...
Two ways to connect WeChat mini program to Tencent Maps
I've been writing a WeChat applet recently an...
How to Install and Configure Postfix Mail Server on CentOS 8
Postfix is a free and open source MTA (Mail Tra...
Summary of various forms of applying CSS styles in web pages
1. Inline style, placed in <body></body&g...
How to view available network interfaces in Linux
Preface The most common task after we install a L...