Question

我有一个文本框/区域的CSS控件，我正在尝试应用水印或占位符，但是正在渲染但由于某种原因没有显示，所以代替显示文本的标签我想用它作为一个占位符，而不是让它看起来有点整洁

已将其作为文本进行，不仅仅是为了显示外观，还会提供更好的功能作为占位符

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
}

#formQuestions {
  width: 500px;
  margin: 2em auto;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 25px;
}

.float-label .control {
  float: left;
  position: relative;
  width: 100%;
  border-bottom: 1px solid #ddd;
  padding-top: 23px;
  padding-bottom: 10px;
}

.float-label .control.small {
  width: 30%;
  border-right: 1px solid #ddd;
}

.float-label .control.medium {
  width: 70%;
  padding-left: 10px;
}

.float-label .control:last-child {
  border: 0;
}

.float-label input,
.float-label textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  overflow-y: hidden;
  border: none;
  border-left: 1px solid rgb(204, 204, 204);
  border-right: 1px solid rgb(204, 204, 204);
  border-bottom: 1px solid rgb(204, 204, 204);
  overflow: auto;
}

.float-label input+label,
.float-label textarea+label {
  position: absolute;
  top: 10px;
  transition: top 0.7s ease, opacity 0.7s ease;
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
}

.float-label input:valid+label,
.float-label textarea:valid+label {
  opacity: 1;
  top: 3px;
}

.float-label input:focus+label,
.float-label textarea:focus+label {
  color: #2c8efe;
}

＆＃13;

  

 <div id="formQuestion" class="float-label" spellcheck="false">
    <div class="divJobDescription">
        <h3><b>Job Description</b></h3>
        <div class="control">
            <textarea name="ctl00$ContentPlaceHolder1$Details1$ProjectReviewForm1$txtDeliverables$TextBox1" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" title="Please provide a meaningful description for your project, this will be used in bids" style="width: 80%;">
Data pulled from job search</textarea>
            <label for="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_Label1">Please provide a meaningful description for your project, this will be used in bids</label>
        </div>
    </div>

＆＃13;

Answer 1

您可以在html中使用占位符属性，如：

<textarea placeholder="this is a placeholder"></textarea>

Answer 2

您可以改用占位符属性。

<textarea placeholder="Please provide a meaningful description.."></textarea>

css html - 占位符未显示

2 个答案: