Custom css radiobuttons hover effect

Question

i'm trying to create something like this but i'm not that good with javascript and so.. So i got this now, but i can't get the hover effect to work..

 <!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>

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

Well this works but how do i make a hover effect? Any help would be usefull! Also if you think i should do this completely different please tell me

Answer 1

Just do it with plain 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>

You could even go more fancy and add some transitions (most browsers support them nowdays 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>

Custom css radiobuttons hover effect

Question

1 answers

solution1
3 2015-10-15 12:44:12

Custom css radiobuttons hover effect

Question

1 answers

solution1 3 2015-10-15 12:44:12

solution1
3 2015-10-15 12:44:12