Comment faire flotter des étiquettes dans CSS

je veux afficher l'étiquette d'une entrée à l'intérieur de son entrée, de sorte que lorsque je clique sur l'entrée, l'étiquette d'animer et d'aller au-dessus de l'entrée et de modifier les styles de l'entrée de la frontière.

Comme ceci:

Enter image description here

css lang-css prettyprint-override">* {
  margin: 0;
  padding: 0;
}

form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  outline: 1px solid lightgrey;
  padding: 10px;
}

label, input[type='text'], input[type='password'] {
  font-size: 12pt;
  padding: 8px;
}

label {
  color: grey;
}

input {
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
}
html lang-html prettyprint-override"><form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text"/>
  <br/>

  <label for="password">Password</label>
  <input id="password" name="password" type="password"/>
  <br/>

  <input type="submit" value"login"/>
</form>

Comment puis-je atteindre cet objectif avec CSS?

18
demandé sur Peter Mortensen 2016-07-11 10:53:32

3 réponses

cela ressemble beaucoup aux entrées de Google new material design.

J'ai créé des entrées personnalisées pour vous qui ressemblent à ce que vous recherchez.

.input-group {
  position: relative;
  margin: 40px 0 20px;
}

input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}

input:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

.bar {
  position: relative;
  display:block;
  width:315px;
}

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

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

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

input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
<div class="input-group">
  <input type="text" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Username</label>
</div>

<div class="input-group">
  <input type="password" required>
  <span class="highlight"></span>
  <span class="bar"></span>
  <label>Password</label>
</div>
31
répondu claudios 2016-07-12 00:06:06

Modifié @23 Déc 2017

cela vous aidera aussi. Vu votre image, je vous demande de changer le texte après avoir cliqué?

input {
  margin: 40px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}

input:focus, input:valid {
 box-shadow: none;
 outline: none;
 background-position: 0 0;
}


input::-webkit-input-placeholder {
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
 color: #1abc9c;
 font-size: 11px;
 -webkit-transform: translateY(-8px);
 transform: translateY(-8px);
 visibility: visible !important;
}
<input placeholder="Username" type="text" required>
<input placeholder="Password" type="password" required>
16
répondu Sagar Kodte 2017-12-23 07:00:04

j'espère que cela vous aidera aussi.

l'animation d'entrée se produit lorsque nous ajoutons attribut en elle, cela peut être fait sans ajouter attribut.

HTML

    <div class="floating-label">      
      <input class="floating-input" type="text" placeholder=" ">
      <label>Text</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" ">
      <label>Time</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="text" onclick="(this.type='date')" placeholder=" ">
      <label>Date</label>
    </div>

    <div class="floating-label">      
      <input class="floating-input" type="password" placeholder=" ">
      <label>Password</label>
    </div>

    <div class="floating-label">  
      <select class="floating-select" 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>
        <option value="4">New York</option>
        <option value="5">Washington</option>
      </select>
      <label>Select</label>
    </div>

    <div class="floating-label">      
      <textarea class="floating-input floating-textarea" placeholder=" "></textarea>
      <label>Textarea</label>
    </div>

CSS

.floating-label { 
  position:relative; 
  margin-bottom:20px; 
}

.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:180px;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
}

.floating-input:focus , .floating-select:focus {
     outline:none;
     border-bottom:2px solid #5264AE; 
}

label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

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

.floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after {
  width:50%;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.floating-textarea {
   min-height: 30px;
   max-height: 260px; 
   overflow:hidden;
  overflow-x: hidden; 
}

DEMO

Flottant de l'Étiquette - Pur CSS - sans Requises*

2
répondu dannibla 2016-11-02 09:13:49