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
Teach you how to build the vue3.0 project architecture step by step
Table of contents Preface: 1. Create a project wi...
What to do if the online MySQL auto-increment ID is exhausted
Table of contents Table definition auto-increment...
MySQL triggers: creating and using triggers
This article uses examples to describe the creati...
How to use CSS to center a box horizontally and vertically (8 methods)
Original code: center.html : <!DOCTYPE html>...
MYSQL development performance research: optimization method for batch inserting data
1. What problems did we encounter? In standard SQ...
How to install the green version of MySQL Community Server 5.7.16 and implement remote login
1. Download MySQL Community Server 5.7.16 and ins...
Sample code for implementing 3D book effect with CSS
Without further ado, let's take a look at the...
How to use MySQL DATEDIFF function to get the time interval between two dates
describe Returns the time interval between two da...
JavaScript to achieve a simple carousel effect
What is a carousel? Carousel: In a module or wind...
WeChat applet uses the video player video component
This article example shares the specific code of ...
Detailed analysis and testing of SSD performance issues in MySQL servers
【question】 We have an HP server. When the SSD wri...
Examples of importing and exporting MySQL table data
This article describes the import and export oper...
Record a slow query event caused by a misjudgment of the online MySQL optimizer
Preface: I received crazy slow query and request ...
Instructions for using MySQL isolation Read View
Which historical version can the current transact...
Using CSS3 to implement font color gradient
When using Animation.css, I found that the font o...