Tengan ustedes un saludo cordial, bueno estoy tratando de realizar un pequeño odontograma, y ya logre colocar los dientes sin problemas y eh agregado estilos para que sean parte de un label relacionado a un input tipo radio
Por favor no figarse en el diseño ya que se esta realizando el sistema segun la norma tecnica se peru y piden que sea con esos modelos, nada de 3d :DEste es el css para que los input simulen un boton:
.radio-toolbar input[type="radio"] {
display:none;
}
.radio-toolbar label {
display:inline-block;
font-family:Arial;
font-size:16px;
border-radius: 4px;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color:#bfb;
border-color: #4c4;
border: 2px solid #444;
}
]3
(Por favor no figarse en el diseño ya que se esta realizando el sistema segun la norma tecnica se peru y piden que sea con esos modelos, nada de 3d :D)
Si alguien podria indicarme una pista para evitar que el radio pierda sus estilos y que las imagenes se queden en la mismo posicion inicial se lo agradeceria.
.radio-toolbar input[type="radio"] {
display:none;
}
.radio-toolbar label {
display:inline-block;
font-family:Arial;
font-size:16px;
border-radius: 4px;
}
.radio-toolbar input[type="radio"]:checked + label {
background-color:#bfb;
border-color: #4c4;
border: 2px solid #444;
}
<div class="radio-toolbar">
<input type="radio" id="id27" name="dientes">
<label for="id27">
<img src="https://i.imgur.com/0XwlgT9.png">
</label>
<input type="radio" id="id28" name="dientes">
<label for="id28">
<img src="https://i.imgur.com/0XwlgT9.png">
</label>
<input type="radio" id="id29" name="dientes">
<label for="id9">
<img src="https://i.imgur.com/0XwlgT9.png" style="position:absolute; z-index:-1">
<img src="https://i.imgur.com/tlJhgM9.png" style="position:absolute; z-index:1">
</label>
<div>