0

<div class="input-group">
  <span class="input-group-addon">Sexo</span>
    <span class="radio">
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Right</span> 
      </label>
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Left</span> 
      </label>
    </span>
</div>

Necesito que quede con el mismo color de fondo que tiene el span "sexo" , en formato input introducir la descripción de la imagen aquí

Algo similar a esto pero sin el input text y con los radio button del mismo lado y todo el input del mismo color plateado gracias saludos !

introducir la descripción de la imagen aquí

3
  • 1
    Podrías describir un poco más cual es el problema y el objetivo? (Edita tu pregunta para añadir más información) el 10 mar. 2017 a las 13:35
  • Estás usando algún css?
    – ffflabs
    el 10 mar. 2017 a las 13:42
  • Estoy usando Bootstrap v3.2 el 10 mar. 2017 a las 13:44

2 respuestas 2

4

Pon sexo en medio y edita un poco el estilo del .input-group para darle un color de fondo, un borde, un redondeado en las eaquinas y un padding a los lados. Al label sexo que está en medio, dale un margin a los lados para separarlo de los radios.

Ejemplo

#sexo {
  background-color: #f2f2f2;
  border: 2px solid #ddd;
  border-radius: 3px;
  margin: 20px auto;
  padding: 0 10px;
}
#sexo label {
  display: inline-block;
}
#sexo label:nth-of-type(2) {
  margin: 0 20px;
  padding: 0;
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group" id="sexo">
    <span class="radio">
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Right</span> 
      </label>
      <label>Sexo</label>
      <label>
        <input type="radio" class="radiobox" name="style-0a2">
        <span> Left</span> 
      </label>
    </span>
</div>

0

Creo que esto podría servirte:

<div class="input-group">
  <span class="input-group-addon">
    <div class="radio">
      <label>
        <input type="radio" name="radio"> Right
      </label>
    </div>
  </span>
  <span class="input-group-addon">
    <div class="radio">
      <label>
        <input type="radio" name="radio"> Left
      </label>
    </div>
  </span>
</div>
2
  • ¿Pordrías detallar un poco más tu respuesta? Así como está no entiendo qué quieres decir.
    – gugadev
    el 10 mar. 2017 a las 14:55
  • 1
    ¡Editado! Perdona, es que había puesto dos espacios en lugar de cuatro...
    – kerunaru
    el 13 mar. 2017 a las 8:09

Tu Respuesta

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

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