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

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

nbsp;html>


    <meta>
    <title>复选单选样式</title>
    <link>

<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>

<h2 id="复选框">复选框：</h2>

  

    

             √     

    体育         

    

             √     

    音乐      

    

             √     

    读书         

    

             √     

    运动   

 

单选框

  

    

           

    男         

    

           

    女   

 

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!