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

Asked

Viewed 519 times

1

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

The problem is that the resource only works if the attribute required is present. This is a problem since not all fields are mandatory. How to make these non-contributory fields work the effect?

Below is used code:

.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>
<script src="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 css html5 css3 css-animations

1 answer

1


There is a way to solve by adding this CSS rule 

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

With this rule you make the validation based on whether the input has something inside or not, and not using the required. If the placeholder appears is pq has nothing inside, if it disappears is pq has been filled

You can read more about it in this link, although being another use case can help you understand the concept: How to prevent an Input Required from starting with the CSS style :invalid

EDIT

To the select has some more details. You need to make a value-based CSS rule and then use a JS to apply it. To make it easier I put a ID in the father of select 

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

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

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

See your code with this working rule and no required in the 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>
<script src="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>

  • Very good @hugocsl, as I would in the case of a select, since it does not have a placeholder

  • @Fredericomoreira there has to see how its structure is, until pq Boostrap’s Select has its particularities... If you think you have solved your problem here you can mark the answer as Accept and open a New Question and put the code of your select and the effect you need help.

  • @Fredericomoreira actually did some tests here trying to change the CSS through his value but I think it is impossible to do this without JS, because even changing the value the class doesn’t change.... I even suggest that you open another question, with your code, because then other people besides me will be able to help you.

  • I even found a code that works, but I couldn’t make it work in my code. See if you can help me. https://codepen.io/dannibla/pen/amgRNR

  • I edited the question by inserting a select in the code.

  • @Fredericomoreira as I told you needed JS, the example you sent had a JS that I used to adapt in your select and worked well, just needed to make an adjustment in CSS and was 100% if you have nothing selected is normal, if you select it goes up the label.

  • Perfect. Many thanks @hugocsl for the help.

Show 2 more comments

Browser other questions tagged html css html5 css3 css-animations

You are not signed in. Login or sign up in order to post.