I'm experimenting with some styles on <textarea>s and I tried doing some stuff with ::before and ::after selectors and I couldn't to anything to get them to work. So the question is: is this possible? I know the CSS surrounding forms is arcane beyond mention but it seems like this should work.
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.
<div class='tx-div-before'></div>
use this before textarea and
<div class='tx-div-after'></div>
use this code after textarea. and add before and after psedu element.
Actually, you can add content with :after on an input element. This will add a sort of tip when the element is in its active state:
#gallery_name {
position:relative;
}
#gallery_name:focus:after {
content: "Max Characters: 30";
color: #FFF;
position: absolute;
right: -150px;
top:0px;
}
<input id="gallery_name" type="text" name="gallery_name" placeholder="Gallery Name">
Related
There are a lot of tooltip solutions on Stack Overflow, ie. ways of showing some text or HTML when the user hovers over some other text. However, I can't seem to find one that:
is pure HTML + CSS
allows the tooltip to be inline (eg. doesn't require a <div> or other block element)
allows HTML tooltip content (potentially with display:block)
These requirements come from wanting to provide definitions of terms inline, inside paragraphs of text, and I'd like for those definitions to be able to contain block-display HTML content (eg. paragraphs and images).
Most of the CSS-only solutions I find seem to work by nesting the "tooltip" definition inside the hover target's HTML. However, that's impossible if you want the term to be inline, but its definition to be block, because you'd have to nest block content inside an inline tag.
Is there any other approach I can use that lets me have words or phrases inside paragraphs as "hover targets", but then show HTML hover definitions when that happens ... without Javascript?
If it is allowable to change the markup of the actual text to replace inline elements (p is tprobably the most likely to need this) with divs + suitable CSS, you can insert tooltip content within divs which are inline-block.
This means any block content can be held in the tooltip.
Here's a trivial example:
.inline {
display:inline-block;
position: relative;
}
.inline .content {
display: none;
position: absolute;
top: 1em;
left: 0;
z-index: 99999;
border-style: solid;
background-color: white;
}
.inline:hover .content {
display: block;
}
<div>I am not hoverable.
<div class="inline">But I am hoverable.
<div class="content">I am tooltip content and I've got an image in me...
<img src="https://picsum.photos/200"/>
<div>...and another div</div>
</div>
</div>I am not hoverable.
</div>
Of course, there's the question of how to ensure the tooltip is visible on all types of devices and where to place it, but that's another question and something ordinary span type tooltips have to solve too.
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
Is it possible to have multiple :before pseudos for the same element?
.circle:before {
content: "\25CF";
font-size: 19px;
}
.now:before{
content: "Now";
font-size: 19px;
color: black;
}
I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
If your main element has some child elements or text, you could make use of it.
Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).
Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.
This element will start acting like his owner is your main element.
HTML
<div class="circle">
<span>Some text</span>
</div>
CSS
.circle {
position: relative; /* or absolute/fixed */
}
.circle:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle:after {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle span {
/* not relative/absolute/fixed */
}
.circle span:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
I've resolved this using:
.element:before {
font-family: "Font Awesome 5 Free" , "CircularStd";
content: "\f017" " Date";
}
Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).
You can also use an image/icon plus text in the content field
e.g.
p.album-title::after {
content: url('https://...camera-icon-blue.png') ' View >';
display: block;
...;
}
In ::after css set content:'any text' and add backgroun-image with svg text from external svg file url(anySvgText.svg) or inline svg code url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')
Also you can use only svg instead content value. but you must set empty string (content: '') to display a ::after style
.circle:before {
content: "\25CF";
font-size: 19px;
color: red;
width: 200px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
background-position-x: 15px;
}
<div class="circle"></div>
I have a html page which has a div looking like this:
<div class="get-this"> blah blah </div>
I have a before pseudoelement on the div and I am trying to apply CSS style only to the div which will not be applicable to the pseudo element.
.get-this:not(::before) {
padding-top:2px;
}
The style is applied to the entire div. IS it possible to restrict the style only to the div and not the pseudo element?
This is a straightforward use of the cascade.
The CSS cascade is intended to enable you to apply general styles to more general selectors and overriding styles to more specific selectors.
Hence:
.get-this {
padding-top:2px;
}
.get-this::before {
padding-top:0;
}
Working Example:
.paragraph-one {
color: red;
}
.paragraph-two {
color: blue;
}
.paragraph-one::before {
content: 'Paragraph One: ';
}
.paragraph-two::before {
content: 'Paragraph Two: ';
color: green;
}
<p class="paragraph-one">This is paragraph one. It is red.</p>
<p class="paragraph-two">This is paragraph two. It is blue.</p>
<p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p>
if you already applied all of your div element to have before or after css they would require you to type content: ""; in order to show style applied to DOM:before or DOM:after
Which means if you set content to none it won't show that.
to overwrite your div style you can simply do
.get-this:before {
content: none;
}
But I would avoid applying before or after properties to all of your div element of your application. div element is often used on many situation, therefore you will run into problem you are now facing on every div element. which mean writing css to overwrite css. that's just not a good practice in most of case.
Also if your DOM element that has before, after its position is related with parent DOM, that being said, if your DOM's padding, margin, positioning, size changes will effect to before or after of that DOM
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/