如何根据视口显示条件占位符和标签

Question

我非常接近解决这个问题，但我被困在剩下的几个项目上。我正在尝试创建一个包含条件占位符的文本输入字段，其工作方式如下：

• 宽度小于 992 像素时，标签应显示在文本输入字段上方，输入内的占位符应显示为“输入您的品牌和型号”。
• 宽度等于或大于 992 像素时，文本输入字段上方的标签应隐藏，输入内的占位符将具有两种不同的样式，应显示为“检查您的召回状态。输入您的品牌和型号”。

除了不知道如何在不破坏占位符的情况下将标签移动到输入字段上方之外，我大部分时间都在工作。

此外，在宽度低于 484 像素时，尽管输入字段的宽度足以容纳整个占位符，但占位符开始被截断。

我在这里创建了一个小提琴：http://jsfiddle.net/Codewalker/r624jsdc/

到目前为止，这是我的代码：

HTML

<form>
    <input type="text" id="name" name="name" required="required" />
    <label for="name">Check your recall status. </label>
    <br/>
    <input type="submit" />
</form>

CSS

input {
    width: 316px;
}
input[type=submit] {
    width: auto;
}
input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: 0.8em;
    position: relative;
    left: -322px;
}

input[required]:invalid + label {
    display: inline;
}

input[required]:valid + label{
    display: block;
}

@media screen and (min-width: 768px) {
     input {
       width: 386px;
     }
    input[required] + label {
      color: #999;
      font-family: Arial;
      font-size: 0.8em;
      position: relative;
      left: -392px; 
    } 
  
}

@media screen and (min-width: 992px) {
    input {
      width: 501px;
    }
    input[required] + label {
      color: #999;
      font-family: Arial;
      font-size: 0.8em;
      position: relative;
      left: -507px; 
    }
    input[required] + label::after {
    content: ' Enter your make and model';
      color: red;
    }
}

Answer 1

调整'top'而不是'left'怎么样？

input {
    width: 316px;
}

input[type=submit] {
    width: auto;
}

input[required]+label {
    display: block;
    color: #999;
    font-family: Arial;
    font-size: 0.8em;
    position: relative;
    left: 0.5em;
    top: -1.4em;
}

input[required]:valid+label {
    opacity: 0;
}

@media screen and (min-width: 768px) {
    input {
        width: 386px;
    }
}

@media screen and (min-width: 992px) {
    input {
        width: 501px;
    }

    input[required]+label::after {
        content: ' Enter your make and model';
        color: red;
    }
}

<ul>
    <li>At widths under 992px, the label should display above the text input field and the placeholder inside the input should read 'Enter your make and model.'</li>
    <li>At widths equal to and above 992px, the label above the text input field should be hidden and the placeholder inside the input will have two different styles and should read '<b>Check your recall status.</b> Enter your make and model'.</li>
</ul>
<br>
<form>
    <input type="text" id="name" name="name" required="required">
    <label for="name">Check your recall status.</label>
    <br>
    <input type="submit">
</form>