Platzierung <label> Text innerhalb der Grenze einer Texteingabe

Question

ich auf der Suche bin diesen Code erhalten:

<form id="first_name"> 
    <div class="form-group"> 
     <label>First name</label> 
     <input type="text" class="form-control input-lg" /> 
    </div> 
</form> 

aussehen wie dieser text input minus den Farben, Checkbox, Wert, usw. Im Grunde will ich es einfach aussehen Wie ein Legenden-Tag in einem Fieldset, aber ohne Tags und das Label innerhalb des Rahmens der Texteingabe. Danke im Voraus!

Answer 1

Hier ist, was Sie brauchen. Sie können die CSS-Werte ändern, die Ihrem Bedarf entsprechen. Wichtig ist auch, dass Sie die background-color des Labels auf die gleiche Farbe wie Ihr Formular/html setzen.

.form-group{ 
 
    padding:10px; 
 
    border:2px solid; 
 
    margin:10px; 
 
} 
 
.form-group>label{ 
 
    position:absolute; 
 
    top:-1px; 
 
    left:20px; 
 
    background-color:white; 
 
} 
 

 
.form-group>input{ 
 
    border:none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<form id="first_name"> 
 
    <div class="form-group"> 
 
     <label>First name</label> 
 
     <input type="text" class="form-control input-lg" /> 
 
    </div> 
 
</form>

Hope this :) hilft.