Home / Questions / 93886
Accepted
Hoose
Asked: 2020-08-10 07:22:57 +0800 CST 2020-08-10 07:22:57 +0800 CST

Float label on select element

  • 772

I am creating a floating label that behaves as if it were a placeholder as follows:

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>

In my input element it works as I wish. The label floats up each time it gets focus, and once the input is filled with information, it stays on top. However, I would like my select element to not show the label (because it's stacked with options) until it gets focus and once the option is selected, the label stays on top.

In a nutshell, I want my select element to have the same behavior as my input element without displaying the label until it gets focus.

html

1 Answers

  1. Best Answer

    In the following code (which shows only the select), all I've done is add a position: relative;and a z-index: -1;to hide the labelbehind the 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>

    • 1