web-dev-qa-db-fra.com

Comment ajouter un bouton dans l'entrée

J'essaie d'y parvenir: enter image description here

Je veux que la flèche bleue agisse comme un bouton avec des déclencheurs de survol et d’onclick; Est-ce possible??

htmlcsshtml5css3html-input
49
Vlad Otrocol

Le bouton n'est pas dans l'entrée. Ici:

input[type="text"] {
    width: 200px;
    height: 20px;
    padding-right: 50px;
}

input[type="submit"] {
    margin-left: -50px;
    height: 20px;
    width: 50px;
}

Exemple: http://jsfiddle.net/s5GVh/

78
Alfo

Utilisez une boîte souple et placez la bordure sur le formulaire.

La meilleure façon de faire cela maintenant (2019) est d'utiliser une boîte flexible.

  • Placez la bordure sur l'élément conteneur (dans ce cas, j'ai utilisé le formulaire, mais vous pouvez utiliser un div).
  • Utilisez une disposition flexbox) pour organiser l’entrée et le bouton côte à côte. Laissez l’entrée s’étirer pour occuper tout l’espace disponible.
  • Maintenant, cachez l'entrée en supprimant sa bordure.

Exécutez l'extrait ci-dessous pour voir ce que vous obtenez.

form {
  /* This bit sets up the horizontal layout */
  display:flex;
  flex-direction:row;
  
  /* This bit draws the box around it */
  border:1px solid grey;
  /* I've used padding so you can see the edges of the elements. */
  padding:2px;
}

input {
  /* Tell the input to use all the available space */
  flex-grow:2;
  /* And hide the input's outline, so the form looks like the outline */
  border:none;
}

input:focus {
  /* removing the input focus blue box. Put this on the form if you like. */
  outline: none;
}

button {
  /* Just a little styling to make it pretty */
  border:1px solid blue;
  background:blue;
  color:white;
}
<form>
  <input />
  <button>Go</button>
</form>

Pourquoi c'est bon

  • Il va s'étirer à n'importe quelle largeur.
  • Le bouton sera toujours aussi gros que nécessaire. Il ne s'étirera pas si l'écran est large ou ne se réduira pas s'il est étroit.
  • Le texte saisi ne sera pas placé derrière le bouton.

Mises en garde et prise en charge du navigateur

La prise en charge de Flexbox dans IE9 est limitée). Le bouton n'apparaît donc pas à droite du formulaire. Microsoft ne prend pas en charge IE9 depuis quelques années. Je suis donc personnellement assez à l'aise avec cela. .

J'ai utilisé un style minimal ici. Je suis parti dans le rembourrage pour montrer les bords des choses. Vous pouvez évidemment faire ce look comme bon vous semble avec des coins arrondis, des ombres portées, etc.

40
superluminary
.flexContainer {
    display: flex;
}

.inputField {
    flex: 1;
}
<div class="flexContainer">
    <input type="password" class="inputField">
    <button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
23
Lars-Lasse

J'ai trouvé un bon code pour vous:

HTML

<form class="form-wrapper cf">
    <input type="text" placeholder="Search here..." required>
    <button type="submit">Search</button>
</form>

CSS

/*Clearing Floats*/
.cf:before, .cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.cf {
    zoom:1;
}    
/* Form wrapper styling */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;   
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;     
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;     
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}  

.form-wrapper button:hover {    
    background: #e54040;
}  

.form-wrapper button:active,
.form-wrapper button:focus {  
    background: #c42f2f;
    outline: 0;  
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before {
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before {
        border-right-color: #c42f2f;
}     

.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}

Démo: sur violon Source: Speckyboy

22
Sahil Popli

C'est la façon la plus propre que j'ai trouvée de le faire avec le temps.

<div class="form-group">
    <div class="input-group">
        <input type="text" name="search" class="form-control" placeholder="Search">
        <span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
     </div>
</div>
0
Brennan James