CSS3를 사용하여 라디오 및 확인 버튼의 표시 스타일을 아름답게 만듭니다.-CSS 튜토리얼-php.cn

CSS3를 사용하여 라디오 및 확인 버튼의 표시 스타일을 아름답게 만듭니다.

高洛峰

풀어 주다： 2017-02-11 13:49:31

원래의

1394명이 탐색했습니다.

우리 모두 알고 있듯이 양식의 첫 번째 요소의 기본 스타일은 보기에 좋지 않으며 프로젝트에서 사용할 때 최적화해야 합니다. 다음 기사에서는 주로 CSS3를 사용하여 라디오의 표시 스타일을 아름답게 만드는 방법을 소개합니다. 그리고 체크 버튼을 눌러주세요. 필요한 친구들은 참고용으로 활용하시면 됩니다. 아래에서 살펴보도록 하겠습니다.

서문

양식 요소에서 라디오 버튼과 확인 버튼이 선택 상태와 선택 해제 상태로 되어 있다는 사실은 모두가 알고 있을 것입니다. 이 두 버튼의 기본 스타일을 재정의하는 것은 어렵습니다. CSS3에서는 상태 선택기 ":checked"와 기타 태그를 통해 사용자 정의 스타일을 구현할 수 있습니다. CSS3를 사용하면 매우 개인화된 사용자 양식을 만들 수 있습니다. 이 기사에서 얻은 효과는 매우 좋습니다. 관심 있는 친구들이 함께 와서 배울 수 있습니다.

렌더링은 다음과 같습니다

CSS3를 사용하여 라디오 및 확인 버튼의 표시 스타일을 아름답게 만듭니다.

예제코드

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

로그인 후 복사

참고:

+는 인접 선택자입니다. CSS .

관계 선택자는 공백 > + ~ 4개만 있습니다. (선택자, 하위 선택자, 인접 선택자, 형제 선택자 포함)

CSS3를 더 많이 활용하세요. 라디오 선택 및 확인 버튼의 표시 스타일을 아름답게 하는 방법에 대한 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!