運用css3實現單選框選中樣式

在慕課網上有篇css3學習課程,在里面看到了一種只要css3就可以完成的選中改變樣式的例子,在這里記錄下來。
html

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form>

css3

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
}
.wrapper {
  margin-bottom: 10px;
}
.box {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  background: orange;
  vertical-align: middle;
  border-radius: 100%;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:100;/*使input按鈕在span的上一層,不加點擊區域會出現不靈敏*/
}

.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;
}

input[type="radio"] + span {
  opacity: 0;

}
input[type="radio"]:checked + span {
  opacity: 1;
}
效果圖
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 因為近期項目沒有壓力,主要工作就是一些涉及功能增刪相關的界面的小工作,修修補補,搞個圖標之類,設計師小伙伴們都懂的...
    泱泱悲秋閱讀 5,118評論 1 27
  • 一、樣式篇 第1章 初識jQuery (1)環境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,443評論 0 44
  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優勢 3.特性與工具方法 1-2 環境搭建 進入...
    mo默22閱讀 1,608評論 0 11
  • 時間越來越近了 我難以抑制住急切的心情 就像是奔涌的江水 沖出干涸的陸地 向著廣闊的大海奔去 而你, 就是我即將奔...
    王不煩閱讀 424評論 0 0
  • 兒時,粽葉是奶奶手中折疊起來的一個個錦囊,里面有各式各樣的珍寶;長大后,粽葉是艘小小的船,遙寄了遠遠的思念。 “...
    西風碧樹天涯路閱讀 229評論 0 0