Separate a css tag selection in a radioButton!

Question

Separate a css tag selection in a radioButton!

Navigation

#1 by (0 votes)

0

Hello Friends I hope and they are well, I have a problem and I do not know how to solve it, what happens is that I want I want to separate a rule of label selection, that is, an input this is the code:

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

As you well know that rule changes everything and what I want is that: a radio type input is independent here I have the code that already does the functionality I need this is a rule that is known as selection of attributes and this is the code:

/*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:

Pension Simulator

Discover through this simulator, which could be an approximate of the amount of Pension you will receive according to the data you provide us.

--Select - < / 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>

And all this code are all css styles:

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

I hope and I understand what I say, and if there is any doubt gladly I write, greetings and good day.

html css

asked by JUAN JOSE BUSTAMANTE SOLIS 13.11.2017 в 18:20

source

1 answer

Get data from a many-to-many relationship with EF and web-api how to send a variable in a mail () of several parts?

score 0 · Answer 1

If you want the CSS rules to apply to the input but not the radio , then you can use the pseudo-selection class :not() to exclude them. Something like this:

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

And here you can see it working with an example, the style is applied to all input minus the radios:

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" />