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
MySQL max_allowed_packet setting
max_allowed_packet is a parameter in MySQL that i...
Introduction to HTML DOM_PowerNode Java Academy
What is DOM? With JavaScript, you can reconstruct...
MySQL explain obtains query instruction information principle and example
explain is used to obtain query execution plan in...
Vue-pdf implements online preview of PDF files
Preface In most projects, you will encounter onli...
MySQL replication advantages and principles explained in detail
Replication is to transfer the DDL and DML operat...
CentOS7 64-bit installation mysql graphic tutorial
Prerequisites for installing MySQL: Install CentO...
HTML basic summary recommendation (text format)
HTML text formatting tags 標簽 描述 <b> 定義粗體文本 ...
Solve the problem of garbled Chinese characters in Mysql5.7
When using MySQL 5.7, you will find that garbled ...
Detailed deployment of docker+gitlab+gitlab-runner
environment Server: centos7 Client: window Deploy...
Native js to implement 2048 game
2048 mini game, for your reference, the specific ...
More Ways to Use Angle Brackets in Bash
Preface In this article, we will continue to expl...
Seven solutions for classic distributed transactions between MySQL and Golan
Table of contents 1. Basic theory 1.1 Transaction...
Detailed explanation of the function and usage of keepAlive component in Vue
Preface During the interview, many interviewers m...
Web page html special symbols html special characters comparison table
Special symbols Named Entities Decimal encoding S...
How to delete special character file names or directories in Linux
Delete a file by its inode number First use ls -i...