Question

我试图将一个伪元素用于textarea并使用内容＆＃34;＆＃34;属性以在中心显示我的文本或图标。一种方法是使用背景图像，但我想要一个纯css解决方案，而不是这个：

    .myelement::before {
     content:"my element centered inside the text area";
font-size: 40px;
text-align:center;
    }

已知的图像处理方法：

textarea {
  background: url("myimage-centered.png") center center no-repeat;
}

我猜测结构会是这样的：

<i class="myelement"></i>
<textarea class"txtarea"></textarea>

如何通过上面的第一个代码实现这一目标？

Answer 1

为什么不使用placeholder

＆＃13;

::-webkit-input-placeholder {
  text-align: center;
}
:-moz-placeholder {
  /* Firefox 18- */
  text-align: center;
}
::-moz-placeholder {
  /* Firefox 19+ */
  text-align: center;
}
:-ms-input-placeholder {
  text-align: center;
}

＆＃13;

<textarea name="" id="" cols="30" rows="1" placeholder="I'm centered"></textarea>

＆＃13;

JSfiddle Demo

Answer 2

你需要一个包装div或span来使这个工作，因为你不能在文本区域上放一个::之前...你还需要z-index。根据您的需要调整％。

在这里：http://jsfiddle.net/ose4r8uj/60/

HTML示例：

  <p>You need a wrapper div to make this work because you can't put a before on a text area.</p>
<div class="myelement">
    <textarea type="text"></textarea>
</div>

CSS示例：

textarea {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
}


.myelement {
    position: absolute;
    display:inline;
}

.myelement:before {
    content: 'Your text';
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 1;
}

如何添加以textarea为中心的伪元素？

2 个答案: