CSS selector reverse :focus + label logic - html

Question

I have mocked up an example below, the first form works great, but I cannot change the markup on these forms or use JS hence trying to work out a CSS method. The CSS I managed to come up with in fiddle works but stuck with what to adjust to get it working for the 2nd example as the label comes before input which I need to work with and only managed to get working with them the other way around so hope this helps.
So guess need to reverse when focus on input for the label before rather than after but this is where I am stuck.
* {
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>

Answer 1

I don't think it's possible to do that in pure CSS, without tweaking the html a little bit. If you're using jQuery you can add this snippet, and if you don't, some native JS should do the job.
$("input[type=text]").focus(function(){
$(this).prev().prev().addClass("active");
}).focusout(function(){
$(this).prev().prev().removeClass("active");
});
* {
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 label.active {
background: #f06d06;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
top: 100%;
margin-top: -16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>