CSS控制文本框/域占位符不显示：用Label实现占位符需求

嘿，我看你现在是用label模拟占位符效果，但想要原生placeholder的完整功能，之前加了没显示对吧？咱们一步步来搞定：

首先，为啥之前placeholder不显示？ #

看你的HTML，textarea里默认有 Data pulled from job search这段文本，原生placeholder只有在输入框完全为空的时候才会显示，这是第一个坑。另外你的CSS里没专门给placeholder写样式，也可能导致它被默认样式覆盖或者透明度不对。

步骤1：改造HTML，把Label内容转成Placeholder #

先把textarea里的默认文本清掉，然后把label的提示内容移到placeholder属性里。如果还想保留label做辅助功能（比如屏幕阅读器），可以给它加个hidden属性：

<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%;"
        placeholder="Please provide a meaningful description for your project, this will be used in bids"
      ></textarea>
      <!-- 保留label用于无障碍访问，隐藏起来不占界面空间 -->
      <label for="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_TextBox1" id="ctl00_ContentPlaceHolder1_Details1_ProjectReviewForm1_txtDeliverables_Label1" hidden>Please provide a meaningful description for your project, this will be used in bids</label>
    </div>
  </div>
</div>

步骤2：添加Placeholder专属CSS样式 #

原生placeholder的默认样式可能和你想要的不一样，咱们给它写个专门的规则，确保显示正常：

/* 自定义原生Placeholder样式 */
.float-label input::placeholder, 
.float-label textarea::placeholder {
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
  opacity: 1; /* 有些浏览器默认会把placeholder弄半透明，这里强制不透明 */
}

/* 聚焦时的Placeholder样式（可选，你可以改成隐藏或者换颜色） */
.float-label input:focus::placeholder, 
.float-label textarea:focus::placeholder {
  color: #2c8efe;
  /* 如果想要聚焦时隐藏placeholder，就加这句：opacity: 0; */
}

步骤3：如果还想保留原有的浮动标签效果 #

要是你舍不得原来那种“输入内容后标签上浮”的交互，可以调整CSS，让label在输入框有内容时显示，同时用placeholder做空状态提示：

/* 调整label的初始状态 */
.float-label input+label, .float-label textarea+label {
  position: absolute;
  top: 3px;
  opacity: 0;
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
  transition: all 0.7s ease;
}

/* 输入框有内容时，显示标签 */
.float-label input:not(:placeholder-shown)+label, 
.float-label textarea:not(:placeholder-shown)+label {
  opacity: 1;
  top: 3px;
}

/* 聚焦时标签变色，保留原来的交互 */
.float-label input:focus+label, .float-label textarea:focus+label {
  color: #2c8efe;
}

几个关键点要注意哈 #

• 一定要清空输入框的默认文本，不然placeholder绝对不会显示
• ::placeholder伪元素在现代浏览器都支持，要是兼容旧IE可以加:-ms-input-placeholder前缀，但现在基本不用管了
• 保留label并隐藏，是为了无障碍访问，屏幕阅读器能识别到输入框的用途

内容的提问来源于stack exchange，提问作者lanes123