自定义css单选按钮悬停效果

Custom css radiobuttons hover effect

本文关键字：悬停 单选按钮 css 自定义      更新时间：2023-09-26

我正在尝试创建这样的东西但我不擅长javascript，所以…所以我现在得到了这个，但是我不能让悬停效果工作…

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="styles.css">
</head>
<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>
<body>
</body>
</html>
CSS

和

input[type=radio] {
  display:none;
  margin:10px;
}
input[type=radio] + label {
  display:inline-block;
  margin: 2px;
  padding: 18px 112px;
  background-color: white;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
}
input[type=radio]:checked + label {
  background-image: none;
  border: 2px solid #08c;
}

好吧，这工作，但我如何使悬停效果?任何帮助都是有用的!如果你认为我应该做一个完全不同的，请告诉我

使用纯CSS。

input[type=radio] {
  display: none;
  margin: 10px;
}
input[type=radio] + label {
  display: inline-block;
  margin: 2px;
  padding: 18px 112px;
  background-color: white;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
}
input[type=radio] + label:hover {
  border: 1px solid black;
  background-color: gray;
}
input[type=radio]:checked + label {
  background-image: none;
  border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>

你甚至可以更花哨，添加一些过渡(现在大多数浏览器都支持http://caniuse.com/#feat=css-transitions)

input[type=radio] {
  display: none;
  margin: 10px;
}
input[type=radio] + label {
  transition: all 0.5s ease;
  display: inline-block;
  margin: 2px;
  padding: 18px 112px;
  background-color: white;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
}
input[type=radio] + label:hover {
  border: 1px solid black;
  background-color: LightGray;
}
input[type=radio]:checked + label {
  background-image: none;
  border: 2px solid #08c;
}
<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios" value="false">
<label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
<label for="radio3">Nexus S</label>

相关文章：