1

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: SelectBox

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

1
  • Puedes probar con un "float: right;" en el select
    – Fergush
    Commented el 23 dic. 2019 a las 14:59

2 respuestas 2

2

Sino prueba de esta manera:

<div class="tipoCedula">                   
                <select class="question pull-right" 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>
4
  • Funciona de una manera extraña como tal me lo alinea pero el spin pasa ha estar como debajo del input, sabes que puede ser? Commented el 23 dic. 2019 a las 15:04
  • prueba aplicando las dos clases, pull-left al label y pull-right al select a ver si hace algo Commented el 23 dic. 2019 a las 15:05
  • Perfecto, ahora funciona de manera correcta. Commented el 23 dic. 2019 a las 15:09
  • Genial ! Abrazo Commented el 23 dic. 2019 a las 15:09
2

Podrias probar ponerle una clase "pull-left" al label "tipo de documento" o un "pull-right" al select

<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 class="pull-left" for="tipoCedula"><span>Tipo De Documento</span></label>
                </div>
2
  • Como tal no genera ningún cambio, muchas gracias de igual manera. Commented el 23 dic. 2019 a las 14:59
  • Esta debería ser una edición de la otra respuesta... o al contrario. Te sugiero hacer el recorrido para que sepas de lo que hablo.
    – DjCrazy
    Commented el 23 dic. 2019 a las 15:50

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.