CSS Effect: Floating label on Form does not work without attribute required

Question

CSS Effect: Floating label on Form does not work without attribute required

Navigation

#1 by (1 votes)

1

I'm using the floating effect on a form to move the label when the user clicks on input or select .

The problem is that the feature only works if the required attribute is present. Which is a problem since not all fields are required. How do these non-mandatory fields work for the effect?

Here is the code used:

.form-control {
    background-color: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%;
    padding: 7px 12px;
    transition: all 300ms linear 0s
}

.form-control:focus {
    box-shadow: none;
    border-color: #313131
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 44px;
    padding: 5px 10px;
    font-size: 18px
}

.floating-labels .form-group {
    position: relative
}

.floating-labels .form-control {
    font-size: 20px;
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    border-bottom: 1px solid #e4e7ea
}

.floating-labels select.form-control>option {
    font-size: 14px
}

.has-error .form-control {
    border-bottom: 1px solid #f44336
}

.has-warning .form-control {
    border-bottom: 1px solid #ff9800
}

.has-success .form-control {
    border-bottom: 1px solid #4caf50
}

.floating-labels .form-control:focus {
    outline: 0;
    border: none
}

.floating-labels label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .form-control:focus~label,
.floating-labels .form-control:valid~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}

.floating-labels .bar {
    position: relative;
    display: block
}

.floating-labels .bar:after,
.floating-labels .bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #707cd2;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .bar:before {
    left: 50%
}

.floating-labels .bar:after {
    right: 50%
}

.floating-labels .form-control:focus~.bar:after,
.floating-labels .form-control:focus~.bar:before {
    width: 50%
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.floating-labels .input-lg,
.floating-labels .input-lg~label {
    font-size: 24px
}

<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script><scriptsrc="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>

<form class="floating-labels ">
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="numero" name="numero"  placeholder=" " required><span class="highlight"></span> <span class="bar"></span>
    <label for="numero">Número</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="bairro" name="bairro"  placeholder=" " required><span class="highlight"></span> <span class="bar"></span>
    <label for="bairro">Bairro</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <input type="text" class="form-control" id="complemento" name="complemento"  placeholder=" " ><span class="highlight"></span> <span class="bar"></span>
    <label for="complemento">Complemento</label>
  </div>
</div>
<div class="col-md-6">
  <div class="form-group mb40">
    <select class="form-control p0" id="cidade" name="cidade" required> 
      <option selected="" value=""></option>
      <option value="1">Cidade 1</option>
      <option value="2">Cidade 2</option>
      <option value="3">Cidade 3</option>
    </select><span class="highlight"></span> <span class="bar"></span>
    <label for="cidade">Cidade</label>
  </div>
</div>
</form>

html html5 css css3 css-animations

asked by anonymous 07.12.2018 / 18:33

1 answer

Request GET with AngularJs how to render unicode correctly

score 1 · Accepted Answer

You can solve this by adding this CSS rule

.floating-labels .form-control:not(:-ms-input-placeholder)~label { }

With this rule you validate based on whether input has something inside or not, not using required . If the placeholder appears is because it has nothing inside, if it disappears is because it was filled

You can read more about it in this link, although it may be another use case to help you understand the concept: # a>

EDIT

For select has some more details. You need to make a CSS rule based on value and then use a JS to apply. For ease I put a ID on the parent of select

#sel .form-control:not([value=""]):valid ~ label { seu css }

And in the HTML tag with JS would look like this, so if the value is different from value="" it applies CSS.

<select class="form-control" onclick="this.setAttribute('value', this.value);" value="">

See your code with this rule working and no required on input

body {
    padding-top: 30px;
}
.form-control {
    background-color: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 4px;
    box-shadow: none;
    color: #565656;
    height: 38px;
    max-width: 100%;
    padding: 7px 12px;
    transition: all 300ms linear 0s
}

.form-control:focus {
    box-shadow: none;
    border-color: #313131
}

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5
}

.input-lg {
    height: 44px;
    padding: 5px 10px;
    font-size: 18px
}

.floating-labels .form-group {
    position: relative
}

.floating-labels .form-control {
    font-size: 20px;
    padding: 10px 10px 10px 0;
    display: block;
    border: none;
    border-bottom: 1px solid #e4e7ea
}

.floating-labels select.form-control>option {
    font-size: 14px
}

.has-error .form-control {
    border-bottom: 1px solid #f44336
}

.has-warning .form-control {
    border-bottom: 1px solid #ff9800
}

.has-success .form-control {
    border-bottom: 1px solid #4caf50
}

.floating-labels .form-control:focus {
    outline: 0;
    border: none
}

.floating-labels label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:placeholder-shown)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}
.floating-labels .form-control:focus~label,
.floating-labels .form-control:not(:-ms-input-placeholder)~label {
    top: -20px;
    font-size: 12px;
    color: #707cd2
}

.floating-labels .bar {
    position: relative;
    display: block
}

.floating-labels .bar:after,
.floating-labels .bar:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #707cd2;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

.floating-labels .bar:before {
    left: 50%
}

.floating-labels .bar:after {
    right: 50%
}

.floating-labels .form-control:focus~.bar:after,
.floating-labels .form-control:focus~.bar:before {
    width: 50%
}

.floating-labels .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

.floating-labels .input-lg,
.floating-labels .input-lg~label {
    font-size: 24px
}


#sel label {
    color: #999;
    font-size: 16px;
    position: absolute;
    cursor: auto;
    font-weight: 400;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all;
    z-index: -1;
}

#sel .form-control {
    background: none;
}

#sel .form-control:focus ~ label , 
#sel .form-control:not([value=""]):valid ~ label {
    top:-18px;
    font-size:14px;
    color:#5264AE;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <dic class="col-xs-12">
            <form class="floating-labels ">
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="numero" name="numero"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="numero">Número</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="bairro" name="bairro"  placeholder=" "><span class="highlight"></span> <span class="bar"></span>
                        <label for="bairro">Bairro</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group mb40">
                        <input type="text" class="form-control" id="complemento" name="complemento"  placeholder=" " ><span class="highlight"></span> <span class="bar"></span>
                        <label for="complemento">Complemento</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group" id="sel">
                        <select class="form-control" onclick="this.setAttribute('value', this.value);" value="">
                            <option value=""></option>
                            <option value="1">Alabama</option>
                            <option value="2">Boston</option>
                            <option value="3">Ohaio</option>
                        </select><span class="highlight"></span><span class="bar"></span>
                        <label for="exampleFormControlSelect1">Example select</label>
                    </div>
                </div>
            </form>
        </dic>
    </div>
</div>