0
我在下面嘲笑了一個例子，第一個表單工作的很好，但我無法更改這些表單上的標記或使用JS，因此試圖找出一個CSS方法。我設法在小提琴中提出的CSS，但堅持要調整什麼以使其適用於第二個示例，因爲標籤出現在輸入之前，我需要使用它，並且只能設法與其他方式一起工作希望這可以幫助。CSS選擇器反向：焦點+標籤邏輯
所以猜猜需要反轉時，重點在標籤的輸入之前，而不是之後，但這是我卡住的地方。
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: white;
}
form input:focus, form textarea:focus {
border-color: #f06d06;
}
form input:focus + label, form textarea:focus + label {
background: #f06d06;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 5px;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
.text-danger {
display: none;
}<form class="go-bottom">
<h2>Label after input</h2>
<div class="form-group">
<span id="billing_address[first_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name]" name="billing_address[first_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[first_name]">First Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[middle_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name]" name="billing_address[middle_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[middle_name]">Middle Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[last_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name]" name="billing_address[last_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[last_name]">Last Name<span>*</span></label>
</div>
</form>
<form class="go-bottom">
<h2>Label after input (need with this markup)</h2>
<div class="form-group">
<label for="billing_address[first_name1]">First Name<span>*</span></label>
<span id="billing_address[first_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name1]" name="billing_address[first_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[middle_name1]">Middle Name<span>*</span></label>
<span id="billing_address[middle_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name1]" name="billing_address[middle_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[last_name1]">Last Name<span>*</span></label>
<span id="billing_address[last_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name1]" name="billing_address[last_name1]" type="text" class="form-control" value="" validate="true">
</div>
</form>
我今天編碼JS的負載，這就是我的觀點，當我去到這個服務的客戶端使用它不會讓JS或因此標記嘗試，因爲只有在CSS中做編輯我能做的事情。我只是看着彎曲....看我是否可以用它來將標籤移動到父元素內的元素的末尾。 – James
我明白了。我也選中了flexbox，但除非我錯過了某些東西，否則您仍然需要正確的html順序，因爲您無法在CSS中選擇以前的元素。您只能更改使用Flexbox進行渲染的順序。但就你而言，我不認爲這是你的問題。但我很想知道你是否找到了純粹的CSS解決方案。 –
是的，仍然認爲這是瘋狂的不能選擇一個以前的兄弟在CSS到今天！一些如此簡單的笑聲 – James