选择在各种状态下输入之前放置的标签

输入具有类似:focus和:valid的状态，并且我想绘制该输入的标签以反映该状态。问题是我的输入表格需要如下所示：选择在各种状态下输入之前放置的标签

Field title 
[input] 

Field title 
[input] 
...

并且似乎无法根据输入状态选择字段标题。 +和~选择器只能在目标之后的元素上工作。我不能在direction: rtl块中反转元素的顺序，因为我需要字段低于标题。

所有剩下的似乎都是像position: absolute这样的硬核选项，并且可以手动放置它们。我说hardcore，因为字段标题有一个可变的高度，这是很多手动偏移打字。有没有更好的选择？

来源

2016-04-15 user81993

您可以发布相关的HTML，使问题清楚了吗？从你看到的第一个标签第一个输入，你对结构严格。 – Stickers

相关：[是否有“以前的兄弟”CSS选择器？]（http://stackoverflow.com/q/1817792/2065702） –

您可以使用flexbox和改变使用柔性order的元素的顺序：

.container { 
 
    display: flex; 
 
    flex-direction: column; /** vertical layout **/ 
 
} 
 

 
.textInput { 
 
    order: 1; 
 
} 
 

 
.field { 
 
    order: 0; 
 
} 
 

 
.textInput:focus + .field { 
 
    color: red; 
 
}

<div class="container"> 
 
    <input type="text" class="textInput"> 
 
    <label class="field">Field</label> 
 
</div>

来源

2016-04-15 12:47:50

选择在各种状态下输入之前放置的标签

回答

相关问题