Question

我已经在下面模拟了一个示例，第一个表单效果很好，但是我无法更改这些表单上的标记或使用JS因此尝试编写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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span>
    <input id="billing_address[last_name1]" name="billing_address[last_name1]" type="text" class="form-control" value="" validate="true">
  </div> 
</form>

Answer 1

我认为在纯CSS中可以做到这一点，而不需要稍微调整一下html。如果你正在使用jQuery，你可以添加这个片段，如果你不这样做，一些原生的JS应该可以完成这项工作。

＆＃13;

$("input[type=text]").focus(function(){
  $(this).prev().prev().addClass("active");
}).focusout(function(){
  $(this).prev().prev().removeClass("active");
});

＆＃13;

* {
  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;
}

＆＃13;

<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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span>
    <input id="billing_address[last_name1]" name="billing_address[last_name1]" type="text" class="form-control" value="" validate="true">
  </div> 
</form>

＆＃13;

CSS选择器反向：焦点+标签逻辑

1 个答案: