將紅色星號添加到必填字段

我想爲我的必填字段添加紅色星號。到目前爲止，我已經使用這個嘗試：將紅色星號添加到必填字段

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

但問題是，它使把星號太遠權。我希望它在文本「狀態：」和「頒發者：」旁邊。我嘗試刪除浮動屬性，但它然後將紅色星號放在文本的前面。

這是一個jsfiddle，它顯示包括CSS樣式的所有內容。

謝謝，任何幫助表示讚賞。

來源

2017-08-07 Alec

而不是::before使用::after並刪除float: right。

::before在您選擇的元素之前放置一個僞元素。 ::after將把它放在後面，所以不要把星號放在你想要的元素之前，而是用一個浮點/位置移動它，你可以自然地放置它。

星號向右移動太遠的原因是因爲浮動會將元素移動到父容器的右側（並非總是父元素，請告訴我是否需要我詳細說明）。因此，通過向右移動，您告訴它移動到標籤容器的最右側，這意味着僅位於文本框的左側，而不是位於標籤文本的右側。

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

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

來源

2017-08-07 15:43:34 Don

嘿，你是浮動的星號向右

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

您正在使用僞選擇它放置元素之前的內容之前

改用::。使用pseudo :: after將它放在元素後面。

來源

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>

來源

2017-08-07 16:03:01 Anil

張貼代碼本身並不能作出一個很好的答案。添加一些單詞來解釋您所做的更改以及原因。 – Don

將紅色星號添加到必填字段

回答

相關問題