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.