如何用css獲取佔位符中的星號

我想爲輸入的佔位符添加一個星號標記。類似這樣的：如何用css獲取佔位符中的星號

我搜索了互聯網，但找不到工作解決方案。

HTML：

<input type="text" name="your-name" placeholder="Naam">

我目前的做法：

目前我試圖僞元素後，將其添加在但沒有出現。

input[type=text]::-webkit-input-placeholder:after { 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]:-moz-placeholder:after { /* Firefox 18- */ 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]::-moz-placeholder:after { /* Firefox 19+ */ 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
} 

input[type=text]:-ms-input-placeholder:after { 
    content: '*'; 
    color: red; vertical-align: top; font-size: 10px; 
}

我不想直接在佔位符中添加符號。但是會以任何其他方式來愛它，讓我以不同的方式設計符號（例如，我想爲我的符號使用藍色，但其餘部分使用灰色）。

因此，如果任何人都可以幫我添加一個星號到佔位符。

JSFIDDLE

來源

2016-05-31 Kiran Dash

@BhojendraNepal但是，這不會讓我樣式。假設我想爲星號符號添加一個不同的顏色。 –

**星號**符號旨在保留在標籤中以顯示該字段爲必填字段而非佔位符。 – Shashank

是@Shashank。但我的客戶也希望我將它添加到佔位符中。所以，如果可以做到的話，我正在尋找一種方法。 –

你爲什麼不乾脆用*佔位符屬性本身？

.asterisk::-webkit-input-placeholder { 
 
    color: #f00; 
 
} 
 
.asterisk:-moz-placeholder { 
 
    color: #f00; 
 
    opacity: 1; 
 
} 
 
.asterisk::-moz-placeholder { 
 
    color: #f00; 
 
    opacity: 1; 
 
} 
 
.asterisk:-ms-input-placeholder { 
 
    color: #f00; 
 
}

<input type="text" name="your_name" placeholder="*" class="asterisk" />

的EndNote：你不能使用僞元素replaced html elements

根據您的意見，您還可以使用所需的屬性，然後他們的風格是這樣的：

<input type="text" name="your_name" placeholder="*" required /> 
[required]::-webkit-input-placeholder { 
    color: #f00; 
}

按照你的下一個評論的要求，你需要用你的輸入，需要在星號的跨度象下面這樣：

.input-group{ 
 
    position: relative; 
 
} 
 
.input-group::after{ 
 
    content: '*'; 
 
    position: absolute; 
 
    top: 3px; 
 
    left: 46px; 
 
    color: #f00 
 
}

<span class="input-group"> 
 
    <input type="text" name="your_name" placeholder="Naam" /> 
 
</span>

來源

2016-05-31 05:12:58

但是，這會將顏色添加到整個佔位符。我想要的是：只有佔位符中的星號符號在灰色和其他文本中佔位符呈紅色。 –

對不起。你弄錯我了。看到我的問題。在我的佔位符中，我有「Naam」，但它應該以紅色顯示帶星號的「Naam *」。 –

根據您的要求再次更新我的答案... –

如何用css獲取佔位符中的星號

回答

相關問題