Can a: :Before Selector Be Used with a <Textarea>

Can a ::before selector be used with a textarea?

The :before and :after will not work on a text-area (nor any element that cannot contain another element, such as img or input), because the generated content of the pseudo-element gets placed within the element but before or after that element's content, and acts itself as an element. The pseudo-element does not get placed before or after the parent element itself (contrary to some information one may find on the internet). To illustrate:

If you have this css:

p:before {content: 'before--'}
p:after {content: '--after'}

Then html like this:

<p>Original Content</p>

Effectively renders to the screen as if the source code were:

<p>before--Original Content--after</p>

Not as if the source code were:

before--<p>Original Content</p>--after

Which is why tags that cannot contain any html element "content" (like those mentioned above) do not recognize the pseudo-elements, as there is no "place" for that content to be generated to. The textarea can contain "content," but only pure text content.

How to add pseudo element centered in a textarea?

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

Is it possible to use CSS selector for textarea value?

I havent got anything. But if you really want to use the value in the textarea you will have to duplicate the info perhaps by adding a data-info attribute and making the text similar to the value. And then use the data attribute to select the specific textarea. This is not a good way to do it but just thought it might help

<textarea data-info="My String">My String</textarea>

css might be like this

textarea[data-info="My String"]{ ....}

Again this is not the best way to do it.

Inserting some text in textarea using css

You might want to check the answer here: Can a ::before selector be used with a <textarea>?

looks like you cant use the :before and :after on elements that don't contain other elements (eg img or textarea)

I also noticed in your html markup that the id is '#le_message_compose' it should probably be just 'le_message_compose', but in any case I think what you are trying is not going to work.

You could use jQuery though:

$('#le_message_compose').html('my message in here');

Here is a fiddle with the jQuery way : http://jsfiddle.net/5u6pnuvr/

Css ::first-letter on textarea does not work

You need a block container in order to use the ::first-letter pseudo-element:

<p>
    <textarea name="content" rows="18" placeholder="Your Message"
              title="Give Your Advice To Us" wrap="soft"></textarea>
</p>

And your CSS:

p::first-letter {
  text-transform: uppercase;
}

Can I select empty textareas with CSS?

this works in recent browsers except edge (at the moment):

textarea:placeholder-shown {
  /* this should be active only when area is empty and placeholder shown */
}

so with jQuery for example you can pick all empty textareas:

$('textarea:placeholder-shown').val()

https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown

CSS how to style a parent item when a textarea is in focus?

Not sure what #hallPost-inner is, but in general CSS selectors cannot ascend, meaning you would need to have the textarea:focus selector, but then would need to style an ancestor element, which cannot be done in css. Here's a good resource, among many others. The link shows how an easy javascript solution can be achieved as well.

How can I use the CSS pseudo-element :before{ content: '' } to affect an option element?

The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.

It would be (roughly) the equivalent of doing:

<option><span>sandy - </span>beach</option>

If you want to update the text value, you will need to use JavaScript.

How to display all CSS selectors & properties in a textarea?

Updated answer

There is a helpful topic here:

How to get the applied style from an element, excluding the default user agent styles

I tried to enhance the solution provided in this topic to better fit your needs by…

• Adding a parameter to be able to choose whether or not to include inline style,
• Adding a function to correctly indent the styles,
• Trying to simplify some code.

var proto = Element.prototype;var slice = Function.call.bind(Array.prototype.slice);var matches = Function.call.bind(proto.matchesSelector ||  proto.mozMatchesSelector || proto.webkitMatchesSelector ||  proto.msMatchesSelector || proto.oMatchesSelector);
// Returns true if a DOM Element matches a cssRulevar elementMatchCSSRule = function(element, cssRule) {  // console.log(cssRule) //.selectorText.split(":")[0]); // Testing to add hover  return matches(element, cssRule.selectorText);};
// Returns true if a property is defined in a cssRulevar propertyInCSSRule = function(prop, cssRule) {  return prop in cssRule.style && cssRule.style[prop] !== '';};
// Here we get the cssRules across all the stylesheets in one arrayvar cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {  return rules.concat(slice(styleSheet.cssRules));}, []);
// Get only the css rules that matches that elementvar getAppliedCSS = function(elm) {  var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));  var rules = [];  if (elementRules.length) {    for (i = 0; i < elementRules.length; i++) {      rules.push({        order: i,        text: elementRules[i].cssText      })    }  }  return rules;}
// TAKIT: Added this function to indent correctlyfunction indentAsCSS(str) {  return str.replace(/([{;}])/g, "$1\n ").replace(/(\n[ ]+})/g, "\n}");}
function getStyle(elm, lookInHTML = false) { // TAKIT: Added the new parameter here  var rules = getAppliedCSS(elm);  var str = '';  for (i = 0; i < rules.length; i++) {    var r = rules[i];    str += '/* CSS styling #' + r.order + ' */\n' + r.text;  }    // TAKIT: Moved and simplified the below from the other function to here  if (lookInHTML && elm.getAttribute('style')) // TAKIT: Using the new parameter    str += '\n/* Inline styling */\n' + elm.getAttribute('style');    return indentAsCSS(str);}
// Output in textareavar exone = document.getElementById("exone");var result = document.getElementById("result");result.value = getStyle(exone, true); // TAKIT: Using the new parameter for inline style

#exone {  border-style: solid;  border-width: 2px;  border-color: rgba(57, 165, 255, 1.00);  width: 150px;  height: 30px;  position: relative;  text-align: center;  background-color: transparent;  color: black;}
#exone:hover {  cursor: pointer;  background-color: rgba(57, 165, 255, 1.00);  color: white;}
#result {  width: 90%;  height: 240px;}

<div id="exone" style="opacity: 0.95;"></div><textarea id="result"></textarea>

---

Related Topics