Home  >  Article  >  Web Front-end  >  How to modify css input style

How to modify css input style

藏色散人
藏色散人Original
2021-04-19 09:28:417383browse

How to modify the css input style: 1. Use pseudo-class elements to change the radio style; 2. Use label to point to the input, and then change the label style to achieve the effect.

How to modify css input style

The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.

css changes the input box style

Currently bloggers only know two methods. If any students have other methods, please discuss them

One: Use pseudo-class elements to change the radio style (this method does not require adding additional labels, which is more convenient)

 .div input[type=radio]::after {
    position: absolute;
    width: 25px;
    height: 25px;
    background: url(../img/inputBG.jpg) no-repeat;
    background-size: 100% 100%;
  }

2: Use the label to point to the input and achieve the effect by changing the label style

 <html>  
    <input type="checkbox" checked="checked" id="aa"/><label for="aa"></label>
  </html>
  <style>
    input[type=checkbox]{
       visibility: hidden;
    }
    label{
      width:20px;
      height:20px;
      border:1px solid #707070;
    }
    input[type=checkbox]:checked + label{
      background: url(../img/duigou.jpg)no-repeat;
      background-size: 100% 100%;
    }
  </style>

[Recommended learning : css video tutorial

The above is the detailed content of How to modify css input style. For more information, please follow other related articles on the PHP Chinese website!

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