How to add pseudo element centered in a textarea?

Question

Im trying to use a pseudo element for a textarea and use the content"" attribute to show my text or icon in the center. A way to do this would be to use the background image but I want a pure css solution instead something along this:

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

known working method with image:

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

I'm guessing the structure would be something like this:

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

How can I achieve this with the 1st code above?

`::before` is a pseudo-element...not a pseudo-class. and I'm pretty sure most browsers don't support them on `textarea`. — Paulie_D, Jun 12 '15 at 16:02
The `::before` and `::after` won't work on a `text-area` (nor any element that can't contain another element, such as `img` or `input`. — The Alpha, Jun 12 '15 at 16:05
fixed the title. Ok so I would I use the content"" to display my text in a centered position inside the textarea? :-/ — user2513846, Jun 12 '15 at 16:07

score 1 · Accepted Answer · answered Jun 12 '15 at 17:30

You need a wrapper div or span to make this work because you can't put a ::before on a text area... You will also need the z-index. Adjust the % to your needs.

Here you go: http://jsfiddle.net/ose4r8uj/60/

HTML sample:

  <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 sample:

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;
}

Paulie_D · Answer 2 · 2015-06-12T16:27:08.080

0

Why not just use a placeholder

::-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;
}

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

JSfiddle Demo

edited Jun 12 '15 at 16:27

answered Jun 12 '15 at 16:15

Paulie_D

107,962
13
142
161

I need it only for a specific text ares and not globally. it is also toggled via JS so its hidden unless toggled. – user2513846 Jun 12 '15 at 16:19
1

..Not sure what you are asking. Certainly all of that could be done with JS but you didn't mention any of these extra requirements in your original question. Perhaps you might like to [edit] it? – Paulie_D Jun 12 '15 at 16:24
Related ? - http://stackoverflow.com/questions/9232810/change-placeholder-text-using-jquery – Paulie_D Jun 12 '15 at 16:28

How to add pseudo element centered in a textarea?

2 Answers2