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});
});
Related
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 5 years ago.
In Css we can genrally style all elements but I noticed that we can not style option element of a select using CSS. As far as I know Option is child element of select then what is possible causes that it don't let you style this element?
I've had reffered various answers on stackoverflow stating that You just can't style option. but I want to know exact reason behind it.
I've had reffered this link which says that option tag is rendered by OS and not by html. If so then why we need to specify option ? why it don't automattically render options.
Here is another link which shows how to style Select tag. But i want to know that why we can't style option? I don't want to know how to style select tag using CSS.
You cannot style the option element because it is rendered by the OS, not HTML. That is why it can't be styled via CSS.
You can of course use some plug-in that replaces select with regular HTML elements that can be styled.
There a duplicate method for this... its correct dropdown not accept the styling so you can make the thing which look like dropdown and give styling to that thing..
Here is the link of this explaination check Answer7
css style on select option
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.
HTML5 email input element shows a list of email address during typing. Is there a way to style it. I mean are there any CSS selectores.
Short answer: No.
The list of email addresses you are seeing has to be a part of your browsers auto-complete functionalities. I just tried an HTML 5 email input element with recent Chrome and IE 10 versions, but no list was displayed. There is no way to edit these with CSS selectors.
However, if you create your own auto-complete / dropdown list controls using JavaScript, you are free to use any CSS style attributes such as colors, paddings and margins.
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 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.