1

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

Imagen del diente sin seleccionar (es un input type radio)

Imagen seleccionada

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

introducir la descripción de la imagen aquí]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>

7
  • 1
    Buen día. ¿Podrías poner un ejemplo ejecutable del código que tienes? Edita tu pregunta y agrega tu código usando el icono de documento de código del editor.
    – gugadev
    Commented el 12 may. 2019 a las 14:28
  • El icono que debes usar para agregar un ejemplo ejecutable es el que está sombreado en la siguiente imagen: i.imgur.com/hGTSrkT.png.
    – gugadev
    Commented el 12 may. 2019 a las 14:35
  • Caronte. Tomate unos minutos, sube las imágenes que usas en local a imgur y pon las URLs en tu código para poder visualizar las imágenes. Cuando el código que subas aquí se vea y funcione como en tu local, guardas cambios. Así no es posible ver qué tratas de hacer y mucho menos el error.
    – gugadev
    Commented el 12 may. 2019 a las 14:41
  • label position relative ( ancho y alto definidos ) y los img position absolute ( con z-index) podría ser una opción Commented el 12 may. 2019 a las 14:45
  • 1
    alo Malbarez, muchas gracias, aplique lo que comentaste y funciono de maravilla, solo agregar un margin-left por que quedaba muy a la derecha y todo quedo genial, muchas gracias por todo.
    – Caronte90
    Commented el 12 may. 2019 a las 18:33

1 respuesta 1

0

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  font-family: Arial;
  font-size: 16px;
  border-radius: 4px;
  /* borde transparente, posición relativa y tamaño en pixels */
  border: 2px solid transparent;
  position: relative;
  width: 40px;
  height: 110px;
  cursor:pointer
}
/* las imagenes dentro del label : */
/* posicion absoluta, arriba a la izq, y z-index negativo */
.radio-toolbar label>img {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 1;
}

/* las imagenes dentro del label que no son la primera  */
/* z-index: 1 */
.radio-toolbar label>img+img {
  z-index: 1;
}

.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="id29">          
        <img src="https://i.imgur.com/0XwlgT9.png">
        <img src="https://i.imgur.com/tlJhgM9.png">    
        </label>
  <div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.