So fügen Sie eine Schaltfläche in einer Eingabe hinzu [closed]

Wie platziere ich eine Schaltfläche wie unten gezeigt visuell in einem Eingabeelement?

Der Benutzer sollte in der Lage sein, wie gewohnt mit der Eingabe zu interagieren. Der Text sollte nicht hinter den Button gehen, auch wenn er lang ist. Der Fokus sollte korrekt funktionieren. Das Formular sollte barrierefrei sein und in Screenreadern korrekt funktionieren. Die gesamte Komponente sollte mit CSS gestaltbar sein und in der Lage sein, die Größe einfach an den verfügbaren Platz anzupassen.

Wie erreiche ich das mit modernem CSS?

Die Schaltfläche befindet sich nicht innerhalb der Eingabe. Hier:

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

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

Beispiel: http://jsfiddle.net/s5GVh/

Verwenden Sie eine Flexbox und legen Sie den Rahmen auf das Formular.

Das geht jetzt (2022) am besten mit einer Flexbox.

• Setzen Sie den Rahmen auf das enthaltende Element (in diesem Fall habe ich das Formular verwendet, aber Sie könnten ein div verwenden).
• Verwenden Sie ein Flexbox-Layout, um die Eingabe und die Schaltfläche nebeneinander anzuordnen. Lassen Sie zu, dass sich die Eingabe ausdehnt, um den gesamten verfügbaren Platz einzunehmen.
• Blenden Sie nun die Eingabe aus, indem Sie ihren Rand entfernen.

Führen Sie das Snippet unten aus, um zu sehen, was Sie erhalten.

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:1px;
}

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;
}

/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
  outline: none;
}

/* Add the focus effect to the form so it contains the button */
form:focus-within { 
  outline: 1px solid blue 
}

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

<form>
  <input />
  <button>Go</button>
</form>

Warum das gut ist

• Es dehnt sich auf jede Breite aus.
• Der Knopf wird immer genau so groß sein, wie er sein muss. Es wird sich nicht dehnen, wenn der Bildschirm breit ist, oder schrumpfen, wenn der Bildschirm schmal ist.
• Der eingegebene Text geht nicht hinter die Schaltfläche.

Vorbehalte und Browserunterstützung

Es gibt eine eingeschränkte Flexbox-Unterstützung in IE9, daher befindet sich die Schaltfläche nicht auf der rechten Seite des Formulars. IE9 wird seit einigen Jahren nicht mehr von Microsoft unterstützt, daher fühle ich mich persönlich damit recht wohl.

Ich habe hier minimales Styling verwendet. Ich habe in der Polsterung gelassen, um die Kanten der Dinge zu zeigen. Sie können dieses Aussehen natürlich so gestalten, wie Sie es möchten, mit abgerundeten Ecken, Schlagschatten usw.

Ich habe einen tollen Code für dich gefunden:

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;
}    

Demo: Auf Geige
Quelle: Speckyboy

Dies ist die sauberste Art, dies zu tun Bootstrap v3.

<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>

Dies kann mit Inline-Block erreicht werden
JS geige hier

<html>
<body class="body">
    <div class="form">
        <form class="email-form">
            <input type="text" class="input">
            <a href="#" class="button">Button</a>
        </form>
    </div>
</body>
</html>


<style>
* {
    box-sizing: border-box;
}

.body {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
}

.form {
    display: block;
    margin: 0 0 15px;
}

.email-form {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
}

.button {
    height: 40px;
    display: inline-block;
    padding: 9px 15px;
    background-color: grey;
    color: white;
    border: 0;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
}

.input {
    display: inline-block;
    width: 200px;
    height: 40px;
    margin-bottom: 0px;
    padding: 9px 12px;
    color: #333333;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    margin: 0;
    line-height: 1.42857143;
}
</style>