Tengo el siguiente problema en mi interfaz gráfica, tengo un select box
con unos estilos específicos lo que sucede es que la flecha que enmarca las opciones no se alinea con el tamaño de el select box
de esta manera:
Como tal quiero lograr que el spin button
se ponga al final y no quede como en medio, cabe resaltar que también pasa con los tipo numero y date, agradezco su ayuda.
HTML:
<div class="tipoCedula">
<select class="question" name="tipoCedula" id="tipoCedula" required autocomple="off">
<option value="" selected disabled hidden></option>
<option value="1">Cédula De Ciudadania</option>
<option value="2">Cédula De Extranjeria</option>
</select>
<label for="tipoCedula"><span>Tipo De Documento</span></label>
</div>
CSS
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=password]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
input[type=number] { -moz-appearance:textfield; }
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=select]::-webkit-outer-spin-button{
margin-right: -300px;
}
input[type=date]:required:invalid::-webkit-datetime-edit {
color: transparent;
}
input[type=date] { color: transparent !important; }
.active input[type=date] { color: inherit !important; }
input,
span,
label,
textarea,
select{
font-family: 'Open Sans';
display: block;
border: none;
}
textarea:focus,
input:focus,
select:focus {
outline: 0;
/*padding: 2px;*/
}
/* Question */
input.question,
textarea.question,
select.question{
font-size: 15px;
border-radius: 2px;
margin: 0;
border: none;
width: 100%;
background: rgba(0, 0, 0, 0);
transition: padding-top 0.2s ease, margin-top 0.2s ease;
overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
}
/* Underline and Placeholder */
input.question + label,
textarea.question + label,
select.question + label{
display: block;
position: relative;
white-space: nowrap;
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid red;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
height: 0px;
}
input.question:focus + label,
textarea.question:focus + label,
select.question:focus + label {
width: 100%;
}
input.question:focus,
input.question:valid {
padding-top: 10px;
}
select.question:focus,
select.question:valid {
padding-top: 10px;
}
textarea.question:valid,
textarea.question:focus {
margin-top: 10px;
}
input.question:focus + label > span,
input.question:valid + label > span {
top: -50px;
font-size: 15px;
color: #333;
}
select.question:focus + label > span,
select.question:valid + label > span {
top: -50px;
font-size: 15px;
color: #333;
}
textarea.question:focus + label > span,
textarea.question:valid + label > span {
top: -50px;
font-size: 15px;
color: #333;
}
input.question:valid + label,
textarea.question:valid + label,
select.question:valid +label{
border-color: green;
}
input.question:invalid,
textarea.question:invalid,
select.question:invalid{
box-shadow: none;
}
input.question + label > span,
textarea.question + label > span,
select.question + label > span{
display: flex;
margin: 0;
position: absolute;
color: #8F8F8F;
font-size: 100%;
top: -22px;
left: 0px;
z-index: 1;
-webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}