Erforderliches Sternchen im Eingabefeld

Ist es möglich, ein rotes Sternchen innerhalb eines Eingabefeldes ganz rechts zu platzieren? Ich habe keinen Platz auf meinem Formular, um ein Sternchen zu setzen, und wenn ich sie setze, wird es seltsam aussehen. Hier ist mein CSS für meine Eingaben.Erforderliches Sternchen im Eingabefeld

input { 
    padding: 15px; 
    border: 1px solid #ccc; 
    border-radius: 3px; 
    margin-bottom: 10px; 
    box-sizing: border-box; 
    font-family: montserrat; 
    color: #2C3E50; 
    font-size: 13px; 
}

Gibt es eine Möglichkeit, dies zu erreichen? Vielen Dank.

Quelle

2016-07-29 Nic

Normalerweise würde ich sugge st ein ': after'-Selektor, aber da' input's selbstschließende Tags sind, können sie keinen Inhalt haben. Möglicherweise müssen Sie entweder eine Änderung an Ihrem HTML berücksichtigen, um dieses CSS zuzulassen, oder an einer JavaScript-Lösung, um es nach dem Laden zu ändern. – Katana314

Haben Sie das Platzhalterattribut? – j08691

@ j08691, verwende ich das Platzhalterattribut. Kann ich HTML in ihnen definieren? – Nic

Mit Bootstrap gibt es eine Klasse namens "Input-Group-Addon", die tun würde, wovon Sie sprechen. Wenn Sie kein Bootstrap verwenden, könnten Sie vielleicht noch das CSS für diese Klasse ausleihen, wenn es so aussieht, wie Sie es sich für Ihr Projekt vorstellen. Es gibt ein Beispiel dafür: http://getbootstrap.com/css/#forms

Quelle

2016-07-29 20:45:43

'form-control-feedback' ist der Klasse im Vergleich zu' input-group-addon' viel ähnlicher –

Sie können kein Vorher oder Nachher für die Eingabesteuerung verwenden. So Inorder das Endergebnis zu erreichen, müssen Sie die Eingabesteuerung mit einem div wickeln (es inline-block) und verwenden css "nach" zu positionieren, die "*"

#wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
    z-index: 1; 
 
} 
 
#wrapper input { 
 
    padding-right: 14px; 
 
} 
 
#wrapper:after { 
 
    content: "*"; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: +3px; 
 
    color: red; 
 
    z-index: 5; 
 
}

<div id="wrapper"> 
 
    <input type="text" /> 
 
</div>

Quelle

2016-07-29 20:55:56

wenn Sie zusammen mit Glyphicons verwenden bootsrap3, können Sie dies versuchen:

.requiredFieldWrapper::after 
 
{ 
 
    font-family: 'Glyphicons Halflings'; 
 
    content: '*'; 
 
    position: absolute; 
 
    top:2px; 
 
    bottom: 0; 
 
    right: 17px; 
 
    font-size: 10px; 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<br> 
 
<br> 
 
<div class="col-xs-10 requiredFieldWrapper"> 
 
<input class="form-control" type="text" autocomplete="off" required> 
 
</div>

Quelle

2018-01-29 23:40:11

Antwort

Verwandte Themen