Hinzufügen eines roten Sternchens zu Pflichtfeldern

Ich möchte ein rotes Sternchen für meine Pflichtfelder hinzufügen. Bisher habe ich versucht, dies mit:Hinzufügen eines roten Sternchens zu Pflichtfeldern

.required-field::before { 
 
    content: "*"; 
 
    color: red; 
 
    float: right; 
 
}

<form id="nonUsSafety" method="post"> 
 
    <div class="divTable"> 
 
    <div class="divTableBody"> 
 
     <div class="divTableRow"> 
 
     <div class="divTableCell required-field">Status:</div> 
 
     <div class="divTableCell"><input type="text" id="statusNonUs" value="${statusNonUs}"></div> 
 
     </div> 
 
     <div class="divTableRow"> 
 
     <div class="divTableCell required-field">Issued By:</div> 
 
     <div class="divTableCell"><input type="text" id="issuedBy" value="${issuedBy}"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>

Aber das Problem ist, es hält zu weit rechts das Sternchen setzen. Ich möchte, dass es direkt neben dem Text "Status:" und "Ausgestellt von:" steht. Ich habe versucht, das Float-Attribut zu entfernen, aber es setzt dann das rote Sternchen vor den Text.

Hier ist eine jsfiddle, die alles einschließlich CSS-Stile zeigt.

Danke, jede Hilfe ist willkommen.

Quelle

2017-08-07 Alec

Anstatt ::before::after verwenden und die float: right entfernen.

::before platziert ein Pseudoelement vor dem Element, das Sie auswählen. ::after platziert es nach, also anstatt das Sternchen vor das gewünschte Element zu setzen und es mit einem Float/Position zu bewegen, können Sie es einfach danach platzieren.

Der Grund das Sternchen zu weit nach rechts verschoben wurde, da bewegt sich das Element auf der rechten Seite des Behälters Eltern (nicht immer das übergeordnete Element, lassen Sie mich wissen, wenn Sie wollen, dass ich erarbeiten) schweben. Wenn Sie also rechts herum schwebten, sagten Sie, dass Sie sich ganz rechts neben dem Label-Container bewegen sollten, also direkt links neben den Textfeldern und nicht rechts neben dem Label-Text.

https://jsfiddle.net/h4depmdf/1/

.required-field::after { 
    content: "*"; 
    color: red; 
}

Quelle

2017-08-07 15:43:34 Don

Hey Sie schweben die Sternchen

statt nach rechts

verwenden

.required-field::after { 
    content: "*"; 
    color: red; 
    margin-left:2px 
}

Sie Pseudo verwenden :: vor Selektor, der den Inhalt vor dem Element platzieren. Verwenden Sie pseudo :: after, um es nach dem Element zu platzieren.

Quelle

2017-08-07 15:44:47

-1

.required-field::before { 
 
    content: "*"; 
 
    color: red; 
 
}

<html> 
 

 
<form id="nonUsSafety" method="post"> 
 
    <div class="divTable"> 
 
    <div class="divTableBody"> 
 
     <div class="divTableRow"> 
 
     <div class="divTableCell">Status:<span class="required-field"><span></div> 
 
      <div class="divTableCell"><input type="text" id="statusNonUs" value="${statusNonUs}"></div> 
 
      </div> 
 
      <div class="divTableRow"> 
 
      <div class="divTableCell">Issued By:<span class="required-field"><span></div> 
 
      <div class="divTableCell"><input type="text" id="issuedBy" value="${issuedBy}"></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </form> 
 
</html>

Quelle

2017-08-07 16:03:01 Anil

Buchungscode allein machen nicht für eine gute Antwort. Fügen Sie einige Wörter hinzu, die erklären, was Sie geändert haben und warum. – Don

Hinzufügen eines roten Sternchens zu Pflichtfeldern

Antwort

Verwandte Themen