2
I want to create a form and I want to include a kind of "option select" of HTML radios, it should look like a semaphore:
I’ve been researching and found about changing all, but found nothing about changing the color of each, and hide 2 radio inside a.
3
As a matter of fact, you can. With CSS3 has been created several pseudo-elements, with them we get a lot of flexibility and with a little bit of creativity we can do exactly what you want.
See this example below, in it we hide the original html radio and recreate with one of our own using the pseudo-element :before.
Pretty simple ne? I hope it helps
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
/* Escondemos o radio original */
input[type=radio] {
display: none;
}
/* Usamos o pseudo-element :before para recriar o novo radio */
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius:50%;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
/* CSS Responsavel por definir o estilo para radio Checkado */
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}<div class="radio">
<input id="male" type="radio" name="gender" value="male">
<label for="male">Homem</label>
<input id="female" type="radio" name="gender" value="female">
<label for="female">Mulher</label>
</div>put to execute the code directly from the site, changed color, however, I ran here locally was not.
I found the problem, is that runs on Google Chrome, however, does not run on Mozilla Firefox.
For firefox the pseudo element declaration is different, please follow https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
For each browser you will have to search the declarations to tend to everyone perfectly, CSS3 is already well implemented by everyone.
Tulio the code it changes the color of all radios, I want, 3 radios that will send only one information that would be between (good, regular and bad), this is 3 radios with 3 different colors good=green, regular=yellow and bad=red.
@Mateusgomes Oce will use the same principle, the only difference is that Oce would put different CSS classes for each one, would have a . green, one . red, um . Yellow for example, after you would overwrite the color according to this CSS class, try doing, if you can’t get a fiddle here to see how far you’ve come.
Browser other questions tagged html radiobutton
You are not signed in. Login or sign up in order to post.
Colors or CORS ?
– Edilson
Show the html you have already done! To get you help from that point! Why hide two radiobox inside one?
– Bruno
yes, I want to do just this, hide two in one, I think it would basically only work with CSS, but how?
– Mateus Gomes
Edilson I wanted to refer to "Colors"
– Mateus Gomes