This question already has an answer here:
Closed 11 years ago.
Possible Duplicate:
Combine CSS Attribute and Pseudo-Element Selectors?
I have a very different issue in Chrome. I used the pseudo selector :after to display asterisk mark on required field items. I used custom attribute 'required' to identify the labels which require asterisk symbol. It works fine in Firefox but in Chrome it behaves differently. All the fields including the not required ones now show asterisk symbol after corresponding label. The strangest fact is when I use Chrome developer tools to inspect the label, the asterisk symbol simply vanishes.
HTML:
<div class="labelbox">
<label data-required>Name</label>
<span class="float-right">:</span>
</div>
CSS:
label[data-required]:after {
content: "*";
color: red;
}
I'm seeing the same error, can't seem to figure it out. Might be a bug in chrome. Either way, I'd just use a class of required and use label.required:after as the selector. That seems to work properly.
Related
This question already has an answer here:
What is it in a pseudo-element that makes the pseudo-element pseudo?
(1 answer)
Closed 6 years ago.
When I read about CSS and HTML I cross the word pseudo-elements.
I haven't found a good short explanation for what pseudo means. Could someone please explain this to me?
psuedo-elements allow you to style specific parts of an element. Some examples of pseudo-elements are:
::after
::before
These specific ones allow you to add style to just after, or just before an element.
for example:
.test {
background-color: gray;
}
.test::after {
content: ' some more text';
color: red
}
<div class='test'>
testing...
</div>
Here, we style the .test element normally
BUT, then we add a bit more after it using the pseudo-element selector ::after to let us add more text and change the colour.
You can read more and see more examples at https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements
Supposed or purporting to be but not really so; false; not genuine:
— https://en.oxforddictionaries.com/definition/pseudo-
A pseudo-element is something that acts like an element, but is not an element.
In a word, "fake".
A more complete definition can be found here: http://www.dictionary.com/browse/pseudo
A pseudo element is a CSS-generated non-DOM element that is rendered as if it was a DOM element in the browser. But it doesn't actually add a node to the DOM. So if you inspected it in, say Chrome Dev Tools, you won't see it as a regular node.
Interestingly some screen-readers read pseudo-element content and others don't.
I have a class of elements
input.na:before { content: "n/a"; }
and I just noticed that this is not working on older versions of Internet Explorer. If possible, I want to make this work in Internet Explorer without editing the HTML of the page to include a new element containing "n/a". So is there a way I can apply changes only in the CSS that will give me the equivalent behavior across all browsers?
This question already has answers here:
Are custom elements valid HTML5?
(12 answers)
Closed 7 years ago.
Is it possible to use custom tags in html such as <g></g> to group text? I then want to apply styling to these custom tags via CSS that accomplish the same thing as in the fiddle with the rounded rectangles and blue text.
The reason all of this is needed is because the first way I have it set up in the fiddle uses generated content - which isn't part of the DOM so the blue text can't be highlighted/selected so that you can copy/paste it.
The solution I came up with was to make the generated content not generated, but merely distinguish the tags from the actual content by a delimiter, in this case, the | character.
So I need a way to produce the same output as the original, but with the new syntax, so that way the text can be copyable.
http://jsfiddle.net/xa3apsdc/20/
Do <span class="g"></span> instead and problem solved.
On custom tags older browsers cant support it, but you can handle them as other not supported (ex. canvas) tags, so if you really need it, you can do it: http://jsfiddle.net/xa3apsdc/22/
You will encouter some problems anyway: custom tags not working in ie8
Key is to set display rule to element: display:block; or display:inline-block and you are set to go.
This question already has answers here:
Can I use a :before or :after pseudo-element on an input field?
(22 answers)
Closed 8 years ago.
I am working on an input form, with different input fields. They all get an attribute with their form.
Eg:
<input class="input-text" form="price">
or
<input class="input-text" form="percent">
I would like to add a suffix with the pseudo element ::after but cannot figure out how.
Ive already tried this CSS:
input[form="price"]::after{
content: "€";
}
and this:
input::after[form="price"]{
content: "€";
}
The problem seems to be with the ::after itself, but i cannot figure out what it is.
Pseudo classes like after and before cannot work on input elements. Why so?
Because they work only on elements which can contain html markup. An input tag doesn't.
Robert Koritnik explained this quite good in this question.
There're other questions like that and like this:
CSS :after input does not seem to work
Add CSS content image after input
Clearly saying no you cannot do that in non container tags.
According to w3 standard :after or :before can be used in only container element.
So you will have to use javascript.
See specification http://www.w3.org/TR/CSS2/generate.html#before-after-content
But there is an alternative you can use contenteditable property which makes div editable & then you can use after tag. But contenteditable is introduced in html5.
Here is a js fiddle http://jsfiddle.net/madterry/W4Y58/ . Down side is you cannot use this as form field & it is not widely supported.
The problem is, that pseude elements are only supported on container elements, but not on allready replaced elements like images or input fields.
This is because they get rendered in the element itself, which is clearly impossible on input elements.
In the W3C specification it is even defined.
This question already has answers here:
Is there a way to apply a CSS style on HTML5 datalist options?
(6 answers)
Closed 8 years ago.
I wondered if it were possible to style <datalist> (example: jsfiddle.net).
I have tried inline css, such as background-color:#F00 (x) on one of the options, but nothing happened. Has anyone succesfully styled them before? or any tutorial links, as I can't seem to find any.
Thanks for help in advance.
Like normal dropdowns <datalists> aren't very flexible for styling. You can't style them with css. Each browser handles their own styling for the <datalist> element.
From the Tuts+ website:
Since wider browser support is only recent, there are predictable
interpretations by the vendors. Firefox and Chrome use the OS theme
for styling of the list options, whilst Opera will inherit certain
styles (color, font-family) from the input field. Other than that,
forget styling the datalist element with CSS.
Example with jquery:
HTML:
<input type='text' id='input'>
Javascript:
$(document).ready(function() {
var arrayOfOptions = [
"Option 1",
"Option 2",
"etc"
];
$("#input").autocomplete({source: arrayOfOptions});
});