輸入字段內必需的星號

是否可以在最右邊的輸入字段中放置一個紅色星號？我的表格上沒有空格標出星號，如果我確實放了它，它會顯得很奇怪。這是我的CSS輸入。輸入字段內必需的星號

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

有沒有辦法做到這一點？謝謝。

來源

2016-07-29 Nic

通常情況下，我會sugge st''：''後選擇器，但因爲'輸入'是自閉標籤，他們不能有內容。您可能不得不考慮對HTML進行更改以允許此CSS，或者JavaScript解決方案在加載後對其進行修改。 – Katana314

你累了佔位符屬性嗎？ – j08691

@ j08691，我正在使用佔位符屬性。我可以在裏面定義HTML嗎？ – Nic

使用Bootstrap有一個叫做「input-group-addon」的類，它可以處理你正在談論的內容。如果你沒有使用Bootstrap，也許你仍然可以借用該類的CSS，如果它看起來像你爲你的項目設想的。這裏有一個使用的例子：http://getbootstrap.com/css/#forms

來源

2016-07-29 20:45:43

'form-control-feedback'與'input-group-addon'相比，更類似於所需的類 –

你不能在輸入控制之前或之後使用。所以序，以實現最終的結果，你需要有一個div（使它inline-block的）來包裝輸入控制並使用CSS「後」來定位「*」

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

來源

2016-07-29 20:55:56

如果您有Glyphicons一起使用bootsrap3，你可以試試這個：

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

來源

2018-01-29 23:40:11

輸入字段內必需的星號

回答

相關問題