使用CSS將'*'添加到具有'required'屬性的輸入字段標簽中

Question

我想知道是否有一種方法，當標簽的for屬性用於具有required html屬性的input元素時，是否僅使用CSS向label元素添加星號。 另外，如果label后面緊跟具有required屬性的input元素，則可以使用邏輯。

起作用的是這樣的：

 input[required] + label:after { content: '*'; color: red; } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

但是我要說的是label和input是否像下面的示例那樣交換，這是更常見的情況。 CSS兄弟選擇器+在這種情況下不起作用。 當label元素為第一個而input為第二個時，有什么方法可以執行上述操作？

 /* ??? */ 

 <form> <div> <label for="name">Name</label> <input id="name" type="text" required /> </div> <div> <label for="age">Age</label> <input id="age" type="text" /> </div> </form> 

謝謝

Answer 1

我建議您保留舊的html並使用CSS flex來訂購位置

 input[required] + label:after { content: '*'; color: red; } div { display: flex; text-align: center; align-items: flex-start; } div input { width: 100px; height: 20px; order: 2; } div label { width: 100px; height: 20px; order: 1; } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

見代碼筆

Answer 2

您可以使用float來將標簽放置在左側的標簽上，如下所示：

 label { float: left; } input[required] + label:after { content: '*'; color: red; } } 

 <form> <div> <input for="name" type="text" required /> <label id="name">Name</label> </div> <div> <input for="age" type="text" /> <label id="age">Age</label> </div> </form> 

Answer 3

CSS也無法以您想要的方式“向后渲染”（並非沒有SASS / SCSS）。

一種解決方案是將“必需”類添加到與必填字段相對應的標簽中。

<style>
    label.required:after { content: '*';color:red; }
</style>

<form>
  <div>
    <label for="name" class="required">Name</label>
    <input id="name" type="text" required />
  </div>
  <div>
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>
</form>

另一個選擇是使用CSS3 Orders屬性，但是父元素需要設置為“ display：flex”。

<style>
    div { display:-webkit-flex;display:flex; }
    div label { order:1; }
    div input { order:2; }
    div input[required] + label:after { content: '*';color:red; }
</style>

<form>
  <div>
    <input id="name" type="text" required />
    <label for="name">Name</label>
  </div>
  <div>
    <input id="age" type="text" />
    <label for="age">Age</label>
  </div>
</form>

EDIT 6/25/2019 SASS / SCSS示例

div {
    display:-webkit-flex;
    display:flex;
    label {
        order:1;
    }
    input {
        order:2;
        &[required] + label:after {
            content: '*';color:red;
        }
    }
}

有關SCSS中的“父選擇器”的更多信息。