<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      CSS生成實心圓環及表單單選按鈕美化

      時間:2021-07-04 09:02:24 類型:HTML/CSS
      字號:    

      頁面上的實心圓圈, 一種方法我們可以用圖片, 那同時也可以直接用CSS直接生成, 

      效果圖:

      1.jpg

      方式如下:

      <div class="circle"></div>
      .circle{
      	box-sizing: border-box;
      	background-clip: content-box;
      	background-color: green;
      	border: 2px solid green;
      	width: 18px;
      	height: 18px;
      	padding:4px;	
      	border-radius: 50%;
      }

      表單應用實例:

      2.jpg

      <form class="form">
      			  <li class="input-box">
      			  	   <div class="fl sex">
      						<input type="radio" name="sex" value="男" checked>
      						<em><i></i>先生</em>
      			  	   </div>
      			  	   <div class="fl sex">
      						<input type="radio" name="sex" value="女">
      						<em><i></i>女士</em>
      			  	   </div>
      				   
      			  </li>
      		</form>
      *{
          paging:0; margin:0;box-sizing: border-box;font-size: 14px;}
          li{list-style: none;}
          .fl{float: left;}
          .form{width: 500px; margin:50px auto;
      }
      .sex{
          width: 50px;
          margin:30px;
          position: relative;
          color: #999;
          line-height: 40px;
      }
      .sex input[type="radio"]{
          position: absolute;
          width: 100%;
          height: 100%;
          display: block;
          z-index: 1;
          cursor: pointer;
          -khtml-opacity: 0;
          -moz-opacity: 0;
          filter: alpha(opacity=0);
          filter: "alpha(opacity=0)";
          opacity: 0;
      }
      .sex em{
          position: relative;
          display: block;
          padding-left: 22px;
      }
      .sex em i{
          width: 18px;
          height: 18px;
          border-radius: 50%;
          border: 2px solid #ccc;
          padding: 4px;
          display: block;
          left: 0;
          top: 11px;
          position: absolute;
          box-sizing: border-box;
          }
      .sex input[type='radio']:checked+em i{
          background-clip: content-box;
          background-color: #0079FE;
          border: 2px solid #0079FE;
      }


      黄网站免费 <