2

Estoy creando un label flotante que se comporta como si fuera un placeholder de la siguiente manera:

body {
  padding:50px;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
select[required]:focus + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before
{
  color: #3399CC;
}
input[type="text"][required]:focus + label[placeholder]:before,
input[type="tel"][required]:focus + label[placeholder]:before,
input[type="text"][required]:valid + label[placeholder]:before,
input[type="tel"][required]:valid + label[placeholder]:before,
select[required]:focus + label[placeholder]:before,
select[required]:valid + label[placeholder]:before,
input[type="password"][required]:focus + label[placeholder]:before,
input[type="password"][required]:valid + label[placeholder]:before
{
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
  transform: translate(0, -1.5em) scale(0.9, 0.9);
}
input[type="text"][required]:invalid + label[placeholder][alt]:before,
input[type="tel"][required]:invalid + label[placeholder][alt]:before,
select[required]:invalid + label[placeholder][alt]:before,
input[type="password"][required]:invalid + label[placeholder][alt]:before{
  content: attr(alt);
}
input[type="text"][required] + label[placeholder],
input[type="tel"][required] + label[placeholder],
select[required] + label[placeholder],
input[type="password"][required] + label[placeholder]{
  display: block;
  pointer-events: none;
  line-height: 1.25em;
  margin-top: calc(-1.5em - 2px);
  margin-bottom: calc((3em - 1em) + 2px);
  font-size: 0.85em;
  font-weight: normal;
}


input[type="text"][required] + label[placeholder]:before,
input[type="tel"][required] + label[placeholder]:before,
select[required] + label[placeholder]:before,
input[type="password"][required] + label[placeholder]:before{
  content: attr(placeholder);
  display: inline-block;
  margin: 0;
  padding: 0 4px;
  color: #9C9C9C;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}
.form-control {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
  color: #31404d;
  box-shadow: none;
  border-radius: 0px;
  border:none;
  border-bottom: 1px solid #31404d;
}

.form-control:focus + .form-control-placeholder{
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  -o-box-shadow:none;
  box-shadow:none;
}

.form-control:focus{
  -webkit-box-shadow:none;
  box-shadow: none;
}
<input type="text" class="form-control" required>
<label placeholder="Código postal" for="exampleInputPassword1"></label>
<br>
<select class="form-control" name="DATA[SIT_TIPO]" required>
  <option value="">Mes</option>
  <option value="1">Ene</option>
  <option value="2">...</option>
</select>
<label placeholder="Mes" for=""></label>

En mi elemento input funciona como deseo. El label flota hacia arriba cada vez que capta el focus, y una vez llenado el input con información, se queda arriba. Sin embargo, me gustaría que mi elemento select no mostrará el label (ya que se amontona con los options) hasta cuando capte el focus y una vez seleccionado el option, se quede el label arriba.

En pocas palabras, deseo que mi elemento select tenga el mismo comportamiento que mi elemento input sin que se muestre el label hasta cuando capte el focus.

1
  • Y si remueves el texto de la primera opción? Cambias <option value="">Mes</option> por <option value=""></option>.
    – Jemonge
    el 9 ago. 2017 a las 15:30

1 respuesta 1

1

En el siguiente código (cual se muestra solo el select), lo único que he hecho es agregar un position: relative; y un z-index: -1; para esconder el label detrás del select:

body {
  padding:50px;
}

select[required]:focus + label[placeholder]:before
{
  color: #3399CC;
}

select[required]:focus + label[placeholder]:before,
select[required]:valid + label[placeholder]:before
{
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transform: translate(0, -1.5em) scale(0.9, 0.9);
  transform: translate(0, -1.5em) scale(0.9, 0.9);
}

select[required]:invalid + label[placeholder][alt]:before{
  content: attr(alt);
}

select[required] + label[placeholder]{

  /* CAMBIOS */
  position: relative;;
  z-index: -1;
  margin-top: -1.5em;
  /* FIN DE CAMBIOS */
  
  display: block;
  pointer-events: none;
  line-height: 1.25em;
  
  margin-bottom: calc((3em - 1em) + 2px);
  font-size: 0.85em;
  font-weight: normal;
}



select[required] + label[placeholder]:before{
  content: attr(placeholder);
  display: inline-block;
  margin: 0;
  padding: 0 4px;
  color: #9C9C9C;
  white-space: nowrap;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  background-image: -webkit-linear-gradient(top, #fff, #fff);
  background-image: linear-gradient(to bottom, #fff, #fff);
  background-size: 100% 5px;
  background-repeat: no-repeat;
  background-position: center;
}

.form-control {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
  color: #31404d;
  box-shadow: none;
  border-radius: 0px;
  border:none;
  border-bottom: 1px solid #31404d;
}

.form-control:focus + .form-control-placeholder{
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  -o-box-shadow:none;
  box-shadow:none;
}

.form-control:focus{
  -webkit-box-shadow:none;
  box-shadow: none;
}
<select class="form-control" name="DATA[SIT_TIPO]" required>
  <option value="">Mes</option>
  <option value="1">Ene</option>
  <option value="2">...</option>
</select>
<label placeholder="Mes" for=""></label>

2
  • ¡Muchas gracias, Aldanux! ¿Podrías decirme que función hace el position:relative aquí? Gracias.
    – Hoose
    el 9 ago. 2017 a las 18:06
  • Un elemento posicionado relativamente es un elemento cuya propiedad de posición calculada es relativa (relative) al elemento que la contiene. El cual ofrece reglas alternativas para el posicionamiento de elementos. (Info sacado de MDN el 9 ago. 2017 a las 18:15

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.