CSS3 radio單選按鈕美化效果

螞蟻小編發表於2018-02-13
CSSS3

預設的radio單選按鈕雖然說不上醜陋，但是絕對不美觀。

下面分享一段程式碼例項，它實現了對單選按鈕的美化效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0 !important;
}
/*radio01*/
#radio01:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 13px;
  font-size: 24px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio01:checked:after {
  content: "\2022";
  border-color: #09f;
  transition: all 0.3s ease-in-out;
}
/*radio02*/
#radio02:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio02:checked:after {
  content: "\2713";
  border-color: #09f;
  transition: all 0.3s ease-in-out;
}
/*radio03*/
#radio03:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 16px;
  font-size: 12px;
  color: #09f;
  border: 2px solid #ddd;
  background-color: #fff;
  box-sizing: border-box;
}
#radio03:checked:after {
  content: "\2716";
  border-color: #09f;
  transition: all 0.5s ease;
}
</style>
</head>
<body>
  <div>
    <div>
      <label for="radio01">螞蟻部落一</label>
      <input type="radio" name="radio-01" id="radio01" />
    </div>
    <div>
      <label for="radio02">螞蟻部落二</label>
      <input type="radio" name="radio-01" id="radio02" />
    </div>
    <div>
      <label for="radio03">螞蟻部落三</label>
      <input type="radio" name="radio-01" id="radio03" />
    </div>
  </div>
</body>
</html>

相關文章