在表单的占位符内添加跨度 [英] Add span inside form's placeholder

问题描述

我想在表单的占位符中添加一个颜色星号，可以吗?

解决方案

这里是IE10+的纯css解决方案

.input-placeholder {位置:相对；}.input-占位符输入{填充:10px；字体大小:25px；}.input-placeholder 输入:有效 + .placeholder {显示:无；}.placeholder {位置:绝对；指针事件:无；顶部:0；底部:0；高度:25px；字体大小:25px；左:10px；保证金:自动；颜色:#ccc;}.placeholder 跨度 {红色;}

<div class="input-placeholder"><input type="text" required><div class="placeholder">电子邮件 <span>*</span>

<输入类型=提交">

I wanna add a color asterix in my form's placeholder, is it possible?

解决方案

Here is pure css solution IE10+

.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}

<form novalidate>
    <div class="input-placeholder">
        <input type="text" required>
        <div class="placeholder">
            Email <span>*</span>
        </div>
    </div>
    <input type="submit">
</form>

这篇关于在表单的占位符内添加跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！