web-dev-qa-db-fra.com

Comment créer un formulaire d'entrée de conception de matériau utilisant CSS et Bootstrap?

Je souhaite concevoir un formulaire d'entrée de conception de matériau suivant à l'aide de CSS et de Bootstrap. Le code suivant est que j'utilise actuellement. Mais cela ne fournit pas un résultat exact que je veux.

Code Stylo Link : Voir le code source ici

CODE HTML :

<div class="container">

  <h2>Google Material Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>

  <p class="footer">
    a <a href="https://scotch.io/tutorials/css/google-material-design-input-boxes-in-css3" target="_blank">tutorial</a> by <a href="https://scotch.io" target="_blank">scotch.io</a>
  </p>

</div>

Mais je veux ce design:

enter image description here

htmlcssformsbootstrap-4material-design
8
shehan96

Depuis que vous avez tagué Bootstrap 4, je suppose que vous vouliez la solution en ce qui concerne ce cadre.

Configurez un groupe de formulaires de formulaire par défaut, une étiquette et un balisage de saisie comme celui-ci;

<div class="form-group">
   <label for="usr">Name:</label>
   <input type="text" class="form-control" id="usr">
</div>

Ajoutez ensuite ce CSS, ce que cela ferait est

  1. étiquette de position par rapport à son conteneur (groupe de formes)
  2. ensuite, nous avons spécifié les positions supérieure et gauche afin qu'elle atterrirait au-dessus du champ de saisie.
  3. J'ai ajouté un fond blanc et un rembourrage à l'étiquette de sorte qu'il aurait une boîte autour de l'étiquette.
.form-group > label {
  top: 18px;
  left: 6px;
  position: relative;
  background-color: white;
  padding: 0px 5px 0px 5px;
  font-size: 0.9em;
}

Voici un violon avec ce code sur bootstrap 4; http://jsfiddle.net/rw29jot4 /

Pour l'animation, vérifiez ce violon, nous devons utiliser des événements de clic et déplacer la position de l'étiquette;

Code mis à jour avec animation; http://jsfiddle.net/sedvo037/

1
Jerdine Sabio

Essayez avec ce code.

HTML:

  <div class="main_div">
  <div class="group">
      <input type="text" required="required"/>
      <label>Name</label>
    </div>
</div>

CSS:

.main_div{
    padding: 30px;
}
input,
textarea {
    background: none;
    color: #c6c6c6;
    font-size: 18px;
    padding: 10px 10px 10px 15px;
    display: block;
    width: 320px;
    border: none;
    border-radius: 10px;
    border: 1px solid #c6c6c6;
}
input:hover{
    border: 3px solid black;
}
input:focus,
textarea:focus {
    outline: none;
    border: 3px solid black;
}
input:focus ~ label, input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label {
    top: -5px;
    font-size: 12px;
    color: #000;
    left: 11px;
}
input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
    width: 320px;
}

input[type="password"] {
    letter-spacing: 0.3em;
}
.group{
    position: relative;
}
label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 12px;
    transition: 300ms ease all;
    background-color: #fff;
    padding: 0 2px;
}
1
Swati