CSS3 美化radio單選按鈕

admin發表於2019-02-01
CSSS3

分享一段程式碼例項，它實現了利用CSS3美化單選按鈕的功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.radio {
  width: 900px;
  padding: 3% 0%;
  margin: 10px auto;
  background-color: pink;
  text-align: center;
}
.radio label {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 100%;
  cursor: pointer;
  background-color: #fff;
  margin-right: 10px;
  overflow: hidden;
}
.radio label:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px;
  left: 4px;
  background-color: #666;
  border-radius: 50%;
  transform: rotate(-180deg);
  transform-origin: -2px 50%;
  transition: transform .2s ease-in;
}
.radio [type="radio"]:checked + label:after {
  transform: rotate(0);
  transition: transform .2s ease-out;
}
.radio [type="radio"] {
  display: none;
}
</style>
</head>
<body>
  <div class="radio">
    <input type="radio" name="ant" id="radio-1" checked="checked">
    <label for="radio-1"></label>
  
    <input type="radio" name="ant" id="radio-2">
    <label for="radio-2"></label>
  
    <input type="radio" name="ant" id="radio-3">
    <label for="radio-3"></label>
  </div>
</body>
</html>

上面程式碼實現美化效果，下面介紹一下實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.radio {
  width: 900px;
  padding: 3% 0%;
  margin: 10px auto;
  background-color: pink;
  text-align: center;
}

整個單選按鈕的容器。

通過margin將其設定為水平居中效果。

[CSS] 純文字檢視 複製程式碼
.radio label {
  display: inline-block;
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 100%;
  cursor: pointer;
  background-color: #fff;
  margin-right: 10px;
  overflow: hidden;
}

預設情況下label元素是內聯元素，將其設定為內聯塊級元素或者塊級元素才能設定它的尺寸。

將其設定為相對定位，這樣它的定位子元素位移就以它為參考物件。

[CSS] 純文字檢視 複製程式碼
.radio label:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 4px;
  left: 4px;
  background-color: #666;
  border-radius: 50%;
  transform: rotate(-180deg);
  transform-origin: -2px 50%;
  transition: transform .2s ease-in;
}

通過偽元素選擇器為label標籤新增一個元素。

設定其為絕對定位，並且top和left屬性值分別為4px，這樣他就垂直水平在lable中居中。

transform: rotate(-180deg)將元素圍繞Z軸旋轉-180度，需要特別注意的是，它的旋轉原點發生了變化（-2px,50%），這樣元素就被隱藏在了左側。

[CSS] 純文字檢視 複製程式碼
.radio [type="radio"]:checked + label:after {
  transform: rotate(0);
  transition: transform .2s ease-out;
}

將選中核取方塊緊鄰的label元素中的偽元素回覆到最初的0度。

[CSS] 純文字檢視 複製程式碼
.radio [type="radio"] {
  display: none;
}

將單選按鈕隱藏，通過lable標籤和其關聯起來。

二.相關閱讀：

（1）.相對定位參閱CSS position:relative 相對定位一章節。

（2）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（3）.:after參閱CSS E::after 偽物件選擇器一章節。

（4）.border-radius參閱CSS3 border-radius一章節。

（5）.transform參閱CSS3 transform一章節。

（6）.transform-origin參閱CSS3 transform-origin一章節。

相關文章