0

Hola Amigos espero y se encuentren bien, tengo un problema y no se como resolverlo, lo que pasa es que quiero quiero separa una regla de selección de etiqueta, es decir, un input este es el código:

input, select {
    font-family: BentonSansBBVA-Book;
    font-size: 16px;
    padding: 24px 16px 0px 16px;
    display: block;
    width: 448px;
    height: 56px;
    border: none;
    border-bottom: 1px solid #121212;
    color: #666666;
    background: #F4F4F4;
}

Como bien se sabe esa regla cambia todo y lo que quiero es que: un input de tipo radio sea independiente aqui tengo el código que ya hace la funcionalidad que necesito este es una regla que se le conoce como selección de atributos y este es el codigo:

/*RadioButtons*/

/*    input[type='radio'] {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 0 2px gray;
}

input[type='radio']:checked {
    box-shadow: 0 0 0 2px  #043263;
    width: 24px;
    height: 24px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type='radio']:checked:before {
    background:  #043263;
}

.role {
      margin-right: 80px;
    margin-left: 20px;
    font-weight: normal;
}

.checkbox label {
    margin-bottom: 20px !important;
}

.roles {
    margin-bottom: 40px;
}*/
/*RadioButtons fin*/

Html:

Simulador Pensión

Simulador Pensión

Descubre a través de este simulador, cual podría ser un aproximado del monto de Pensión que recibirás de acuerdo a los datos que nos proporciones.


--Seleccione--</option>--> 0

                        </select>
                        <label class="combo">Hijos orfandad nula</label>
                    </div>


                </div>
                <div id="bt_div" class="izquierda">
                    <div class="group">
                        <select name="producto" class="Caja_txt_246" id="producto" tabindex="9">
                            <!--                                <option value="" selected="">--Seleccione--</option>-->
                            <option value="Tarjeta de credito">0</option>
                        </select>
                        <label class="combo">Hijos orfandad sencilla</label>
                    </div>
                </div>


            </div>

            <div class="botonera">      
                <div id="bt_div" class="derecha">
                    <div class="group">
                        <select name="producto" class="Caja_txt_246" id="producto" tabindex="9">
                            <!--                                <option value="" selected="">--Seleccione--</option>-->
                            <option value="Tarjeta de credito">0</option>

                        </select>
                        <label class="combo">Hijos orfandad doble</label>
                    </div>


                </div>
                <div id="bt_div" class="izquierda">
                    <div class="group">
                        <select name="producto" class="Caja_txt_246" id="producto" tabindex="9">
                            <!--<option value="" selected="">--Seleccione--</option>-->
                            <option value="Tarjeta de credito">0</option>
                        </select>
                        <label class="combo">Ascendientes</label>
                    </div>
                </div>


            </div>

            <div class="botonera">
                <div  id="bt_div" class="derecha" >
                    <input type="radio" name="role" value="soltero" id="soltero">
                    <span class="role" for="soltero"> Soltero</span> 

                    <input type="radio" name="role" value="casado" id="casado">
                    <span class="role" for="casado">Casado</span>                    
                </div>
            </div>

            <div class="botonera">
                <div id="bt_div" class="derecha exiit">
                    <a href="https://test.bbvanet.com.mx/portalblg/portalblg/public/registrousuario?cloud=true" class="exit">Cancelar</a>
                </div>
                <div id="bt_div" class="izquierda">
                    <button type="submit" id="loginButton" name="loginButton">Siguiente</button>
                </div>
            </div>      
        </form>
    </div>
</body>


Y todo este codigo son todos los estilos css:

body {
    margin: 0;
    padding: 5px;
}
@font-face {
    font-family: BentonSansBBVA-Book;
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book.eot);
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book?#iefix) format('embedded-opentype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book.woff2) format('woff2'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book.woff) format('woff'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book.ttf) format('truetype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Book.svg#svgFontName) format('svg')
}
@font-face {
    font-family: BentonSansBBVA-Bold;
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold.eot);
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold?#iefix) format('embedded-opentype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold.woff2) format('woff2'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold.woff) format('woff'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold.ttf) format('truetype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Bold.svg#svgFontName) format('svg')
}
@font-face {
    font-family: BentonSansBBVA-Medium;
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium.eot);
    src: url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium?#iefix) format('embedded-opentype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium.woff2) format('woff2'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium.woff) format('woff'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium.ttf) format('truetype'), url(https://www.bancomer.com/fbin/repositorio/BentonSansBBVA-Medium.svg#svgFontName) format('svg')
}
* {
    box-sizing: border-box;
}
/* basic stylings ------------------------------------------ */

h1 {
    font-family: BentonSansBBVA-Medium;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
    font-weight: normal;
    font-size: 36px;
    color: #121212;
}
h2 {
    font-family: BentonSansBBVA-Book;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
    font-weight: normal;
    font-size: 22px;
    color: #121212;
}

h3{
    font-family: BentonSansBBVA-Book;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
    font-weight: normal;
    font-size: 22px;
    color: #121212;

}

.txt_forz{
    font-family: BentonSansBBVA-Book;
    text-align: left;    
    font-size: 15px;
    color: #666666;
    margin-top: 0px;
    margin-bottom: 16px;
}
.exit{
    font-family: BentonSansBBVA-Medium;
    color: #237ABA;
    font-size: 15px;
    text-decoration: none;
}
/* form starting stylings ------------------------------- */

.container {
    max-width: 928px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.containerPaso4{
    max-width: 928px;
    width: 50%;
    margin: 0 auto;
    display: block;
}

.group {
    position: relative;
}
input, select {
    font-family: BentonSansBBVA-Book;
    font-size: 16px;
    padding: 24px 16px 0px 16px;
    display: block;
    width: 448px;
    height: 56px;
    border: none;
    border-bottom: 1px solid #121212;
    color: #666666;
    background: #F4F4F4;
}

div span input{
    background: #237ABA;
}





select {
    padding: 8px 16px 0px 16px;
}
.combo{
    font-size: 12px;
    top: 8px;
}
textarea {
    font-family: BentonSansBBVA-Book;
    font-size: 16px;
    padding: 24px 16px 0px 16px;
    display: block;
    width: 448px;
    height: 160px;
    border: none;
    border-bottom: 1px solid #121212;
    color: #666666;
    background: #F4F4F4;
    resize:none;
}
input:focus, select:focus, textarea:focus {
    outline: none;
}
.cond {
    background-image: url(icon/warning-icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    font-family: BentonSansBBVA-Book;
    font-size: 12px;
    text-align: left;
    padding-left: 24px;
    display: none;
    margin-top: 8px;
    margin-left: 16px;
    margin-bottom: 8px;
}
.botonera {
    display: table;
    margin: 0 auto;
    width: 928px;
    padding-top: 32px;
}

.botonera1{
    display: table;
    margin: 0 auto;
    width: 419.5px;
    padding-top: 32px;
}

.inputsChicos{
    display: table;
    margin: 0 auto;
    width: 209.75px;
    padding-top: 32px;

}



.derecha {
    width: 50%;
    display: table-cell;
}
.derecha {
    margin-top: 9px;
    vertical-align: middle
}
.izquierda {
    font-family: BentonSansBBVA-Bold;
    text-decoration: none;
    color: #237ABA;
    font-size: 15px
}
#loginButton {
    font-family: BentonSansBBVA-Bold;
    border-radius: 1px;
    width: 132px;
    height: 56px;
    background: #237ABA;
    border: 0;
    color: #fffefe;
    font-size: 14px;
    filter: none;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    float: right
}
#loginButton:disabled {
    background: #E9E9E9;
    cursor: not-allowed
}
.novalid {
    border-bottom: solid 1px #D44B50!important;
    background-color: #FCDFDF!important;
    -webkit-transition: background-color 3s ease-out;
    -moz-transition: background-color 3s ease-out;
    -o-transition: background-color 3s ease-out;
    transition: background-color 3s ease-out
}
/* LABEL ======================================= */

label {
    font-family: BentonSansBBVA-Book !important;
    color: #666666;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 16px;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
/* active state */

input:focus ~ label, textarea:focus ~ label{
    top: 8px;
    font-size: 12px;
    color: #666666;
}
/* HIGHLIGHTER ================================== */

.highlight {
    position: absolute;
    height: 80%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

input:focus ~ .highlight, textarea:focus ~ .highlight  {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */

@-webkit-keyframes inputHighlighter {
    from {
        background: #5BBEFF;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background: #5BBEFF;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background: #5BBEFF;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@keyframes loading {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

h1 span { color: blue; }

input[type='radio']{

}

/*RadioButtons*/

/*    input[type='radio'] {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 0 2px gray;
}

input[type='radio']:checked {
    box-shadow: 0 0 0 2px  #043263;
    width: 24px;
    height: 24px;
}

input[type='radio']:before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    margin: 20% auto;
    border-radius: 50%;
}

input[type='radio']:checked:before {
    background:  #043263;
}

.role {
      margin-right: 80px;
    margin-left: 20px;
    font-weight: normal;
}

.checkbox label {
    margin-bottom: 20px !important;
}

.roles {
    margin-bottom: 40px;
}*/
/*RadioButtons fin*/




@media screen and (max-width: 945px) {
    .enviar,
    .regis {
        position: relative
    }
    select {
        width: 100%
    }
    .botonera {
        width: 100%
    }

    .botonera1{
        width: 100%;
    }

    .enviar,
    .regis {
        width: 100%;
        display: block
    }
    #loginButton {
        float: none;
        width: 100%
    }
    .regis {
        top: 70px;
        text-align: center
    }
    .enviar {
        top: -25px
    }
    input, textarea{
        width: 100%;
    }
    .botonera {
        display: block; 
        padding-top: 16px;
    }
    .derecha {
        width: 100%;
        display: block;
        margin-bottom: 16px;
    }
    .exiit.derecha{
        text-align: center;
    }
}

Espero y me de a entender de lo que comente, y si hay alguna duda con gusto les escribo, saludos y buen dia.

12
  • deberias usar bootstrap para diseño de la pagina Commented el 13 nov. 2017 a las 17:26
  • Hola Carlos, bootstrap no se muy bien :(, si hay manera en que se pueda hacer con css puro?? Commented el 13 nov. 2017 a las 17:40
  • @CarlosEnriqueGilGil ¿por qué debería usar Bootstrap?
    – Alvaro Montoro
    Commented el 13 nov. 2017 a las 17:43
  • @JUANJOSEBUSTAMANTESOLIS por favor, no sólo incluyas el CSS sino también el HTML relacionado, para así crear un ejemplo mínimo verificable y poder ver el problema mejor.
    – Alvaro Montoro
    Commented el 13 nov. 2017 a las 17:44
  • Perfecto! una disculpa por eso, voy a editar la pregunta, para que tenga mayor contexto. Commented el 13 nov. 2017 a las 17:45

1 respuesta 1

1

Si lo que quieres es que las reglas CSS se apliquen a los input pero no a los de tipo radio entonces puedes usar la pseudo-clase de selección :not() para excluirlos. Algo como esto:

input:not([type=radio]), select {
    font-family: BentonSansBBVA-Book;
    font-size: 16px;
    padding: 24px 16px 0px 16px;
    display: block;
    width: 448px;
    height: 56px;
    border: none;
    border-bottom: 1px solid #121212;
    color: #666666;
    background: #F4F4F4;
}

Y aquí lo puedes ver funcionando con un ejemplo, el estilo se aplica a todos los input menos a los radio:

input:not([type=radio]), select {
    font-family: BentonSansBBVA-Book;
    font-size: 16px;
    padding: 24px 16px 0px 16px;
    display: block;
    width: 448px;
    height: 56px;
    border: none;
    border-bottom: 1px solid #121212;
    color: #666666;
    background: #F4F4F4;
}
<input type="text" placeholder="Nombre" />
<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<input type="number" />
<input type="radio" name="opciones" value="a" />
<input type="radio" name="opciones" value="b" />

2
  • Muchas gracias @Alvaro Montoro con esta simple linea me soluciono mi problema: :not([type=radio]) de verdad muchas gracias, te mando un gran saludo. estos ejemplos como los puedo encontrar?? Commented el 13 nov. 2017 a las 18:01
  • Ya encontre ejms, te mando nuevamente un gran saludo Commented el 13 nov. 2017 a las 18:27

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.