Detailed graphic and text explanation of radio-select and check-select styles beautification

php中世界最好的语言
Release: 2018-03-22 13:10:16
Original
1851 people have browsed it

This time I will bring you detailed pictures and texts on beautifying single-selection and multiple-selection styles. Notes on beautifying single-selection and multiple-selection stylesare Which ones, the following are practical cases, let’s take a look.

Preface

I believe everyone knows that in form elements, radio buttons and check buttons Both have selected and unselected states. It is difficult to override the default styles of these two buttons. In CSS3, we can implement custom styles through the status selector ":checked" and other tags. Using CSS3, we can create a very personalized user form. The effect achieved in this article is very good. Friends who are interested can come and learn together.

The rendering is as follows

##Example code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选单选样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*复选框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }
    /*单选框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层,不加点击区域会出现不灵敏*/
    }
    .redio-box span { 
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>复选框:</h2>
<form action="#">
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </p>
    <label for="usename">体育</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </p>
    <label for="usepwd">音乐</label>
  </p>
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </p>
    <label for="checkbox3">读书</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </p>
    <label for="checkbox4">运动</label>
  </p>
</form> 
<h2>单选框</h2>
<form action="#">
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </p>
    <label for="boy">男</label>
  </p>
  
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </p>
    <label for="girl">女</label>
  </p>
</form> 
</body>
</html>
Copy after login

Note:

+ is the adjacent selector of css.

There are only four relationship selectors, which are spaces > + ~ (including selectors, sub-selectors, adjacent selectors, and sibling selectors)

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS implementation of first-level navigation bar

Detailed explanation of the use of linear-gradient

Common misunderstandings in the use of CSS and HTML

The above is the detailed content of Detailed graphic and text explanation of radio-select and check-select styles beautification. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template