Home > Article > Backend Development > How to change the default radio and checkbox styles with css

How to change the default radio and checkbox styles with css

不言Original: 2018-07-21 10:42:241890browse

This article shares with you how to change the default radio and checkbox styles with css. The content is very good. Friends in need can refer to it. I hope it can help everyone.

Use the css label pseudo-class (::before) to replace the checkbox and radio effects:

Advantages: Pictures are needed to adjust the styles before and after selection. Pure css
Disadvantages: Compatibility, not supported below IE8

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css改变默认的radio和checkbox的样式</title>
  <style>
    input[type="radio"],
    input[type=&#39;checkbox&#39;] {
      display: none;
    }

    input[type=&#39;radio&#39;]+label::before,
    input[type=&#39;checkbox&#39;]+label::before {
      content: &#39;&#39;;
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 6px;
      border-radius: 100%;
      vertical-align: middle;
      border: 1px solid #E4E4E4;
      background: #FFFFFF;
      background-image: url(&#39;https://i.loli.net/2018/07/20/5b517d0bf066a.png&#39;);
      background-position: 0px 0px;
    }

    input[type=&#39;radio&#39;]:hover+label::before,
    input[type=&#39;checkbox&#39;]:hover+label::before {
      background-position: -15px 0px;
    }

    input[type=&#39;radio&#39;]:checked+label::before,
    input[type=&#39;checkbox&#39;]:checked+label::before {
      background-position: -15px -15px;
    }
  </style>
</head>

<body>
  <p>单选框</p>
  <input type="radio" name="sex" value="man" id="man" checked>
  <label for="man">男</label>
  <input type="radio" name="sex" value="female" id="female">
  <label for="female">女</label>
  <p>多选框</p>
  <input type="checkbox" name="fruits" value="apple" id="apple" checked>
  <label for="apple">苹果</label>
  <input type="checkbox" name="fruits" value="orange" id="orange">
  <label for="orange">橙子</label>
</body>

</html>

Related recommendations:

How Css Sprite implements image stitching technology

How to set the border effect for images through the CSS border attribute

The above is the detailed content of How to change the default radio and checkbox styles with css. 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

Previous article：How to manually add user functions in the YII2.0 backend? Which class is used to implement it?Next article：How to manually add user functions in the YII2.0 backend? Which class is used to implement it?

See more

How to change the default radio and checkbox styles with css

Related articles