我想在每個所需標籤上添加所需的（*）

Question

我有一個要求用紅色星號標記。我需要在我的應用程序中使用必需字段的標籤。應用程序中有很多形式。我正在嘗試使用下面的代碼jquery。

$(".required").each(function(){ 
    $(this).prepend("<span class='red'>*</span>"); 
    }); 

任何人都可以幫助我應用這個使用CSS。幫助將不勝感激。

Answer 1

爲什麼不只是CSS？

label.required::before { 
 
    content: '*'; 
 
    margin-right: 4px; 
 
    color: red; 
 
}

<form> 
 
    <label for="input1" class="required">Label One</label> 
 
    <input type="text" id="input1" /> 
 
</form>

Answer 2

我會使用類似下面的JQuery。 （儘管它確實取決於確切的HTML代替當然）。

$(".required").append(
    $("<span>").addClass("red").text("*"); 
); 

然後爲CSS，只需

.required.red { color: rgb(255,0,0); } 

注：CSS中的顏色屬性可以在各種不同的方式來指定。 rgb方法只是我的默認偏好。

Answer 3

雖然@伊舍伍德的回答符合你的要求，這裏是一個有趣的替代方法：

使用required屬性您input！而非一類。通過float反轉label位置，然後在標籤上使用::after僞元素，該僞元素跟隨具有所需屬性集的輸入。

演示：

div.form { width: 240px; } 
 
div.form input { 
 
    float: right; 
 
} 
 
input[required] + label::after { 
 
    content: '*'; 
 
    display: inline-block; 
 
    color: red; 
 
} 
 
br { 
 
    clear: both; } 
 
}

<div class="form"> 
 
    <input id="i1" /> 
 
    <label for="i1">Label: </label> 
 
    <br> 
 
    <input id="i1" required /> 
 
    <label for="i1">Label: </label> 
 
    <br> 
 
    <input id="i1" /> 
 
    <label for="i1">Label: </label> 
 
    <br> 
 
    <input id="i1" required /> 
 
    <label for="i1">Label: </label> 
 
</div>

Answer 4

如果你使用的引導.. 它作爲這個簡單..

<label> Label Name <span class="symbol required"></span></label>