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
Related
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:
Closed 10 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Using CSS, I want to define a link's style. However, I want to do it in document, instead of defining it as part of the header. Is it possible to define it (including a:hovor, a:visited, etc).
I'm using the tag, and I would like to be able to do
<a style="a:hovor:color:#ffffff"><!-- ... --></a>
or something like that. I'm pretty sure that doesn't work. So how would define that, or can you even?
No, you can't.
Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.
You can always apply a CSS style on Mouseover with Javascript/jQuery. With that said, you should really avoid inline styles. Why can't you use a Stylesheet?
I'd prefer to give it a class and then define it in a stylesheet, but it's possible with JS/jQuery.
http://jsfiddle.net/Sxpkp/
This question already has answers here:
Is there a css selector for selecting an element futherup in the html?
(4 answers)
Closed 8 years ago.
As the title says -
Here I have a link which contains img tag:
<a href="#">
<img src="somthng.jpg" />
</a>
I have to style this link, there is no class in the image or the link so don't suggest me to add a class. Further I don't want the styling of this link with any other link such as :
<a href="#">
<div>...</div>
</a>
So I'm trying to trigger the link by css a img {...}, but that would style the image not the anchor.
selectors? http://www.w3.org/TR/CSS2/selector.html
You could also use js to target the image file src and then use that to append a class to the link
The only thing you can do in this situation without resorting to javascript is look for anything that all anchors that contain images have in common. Or anything that all anchors that don't contain images have in common. Are they all nested in the same div structure with a specific class? Could you target them like this div#content div.inner div.someArbitraryClass a for example? Could you style all links the way you want them when they're around images and then find a way to override this style for other links, if they all have something in common? Sometimes you have to think outside the box.
... so you have to style the a tag only a {}, if you're using Firebug, get the CSS Path to that a tag, that's the only way you can get to it if at all. Assuming that's doable your like
some tag and another nested tag a{}
If you want to give padding, margin, width or height to link (i.e: a). Don't forgot to apply display-inline-block; to link.
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Is adding CSS rules outside the Header possible?
Declare CSS style outside the “HEAD” element of an “HTML” page ?
I'm working on a CMS which doesn't permit me to edit the CSS, nor do I have access to the head to add a link to my own CSS file.
I do however have access to certain html zones of the website and would like to declare my CSS link inline with the HTML for each element.
The reason: I'm building a "garage door" with CSS3 Transitions and therefore it's important that I can declare the ID and style in my html directly.
So how would one declare a CSS file inline with the html? Here's what I've come up with, but I'm clearly missing something.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
I realize it's entirely counter-intuitive to declare the css inline with the html, but I see no other way of getting this to work.
Thanks guys
I'm working on a CMS which doesn't permit me to edit the CSS
Then either:
It is a really awful CMS and should be replaced or
You don't have the authority to add CSS to the site (but someone else does and you need to talk to them)
Can one declare a css file directly in an html element?
The only place that <link> or <style> elements are allowed is the <head>, although browsers will error recover from them being elsewhere.
style attributes are allowed on most elements, but are bad practise.
"ul id="garagedoor": href="http://linktothefile/garagedoor.css"
That doesn't even resemble HTML.
This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 5 years ago.
I want to do something like this:
<li style="hover:background-color:#006db9;">
But it wont work. Is this possible to do in some way, or do I have to write the css in the head or external css-document?
It is not possible with inline styles, but the (in)famous onmouseover / onmouseout event handler can do the same thing.
<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">
Caveat: CSS definitions with hyphens have to be translated to Javascript using camelCase, like (css)background-color = (javascript)backgroundColor
This is not possible using the style attribute. You'll have to use CSS, either in the document itself or in an external file.
li:hover { background-color:#006db9; }
If that's not an option then you'll have to resort to JavaScript.
AFAIK this can't be done inline without Javascript. You will have to put it into the head or external stylesheets as you already suggest.
A <style> tag in the body is also interpreted by all browsers I know but is not valid and therefore not recommendable.
AFAIK You can't use pseudo-classes (:hover, :active, etc) on inline css.
Instead of just having the <li>, you can nest it in an anchors tag <a href="#" class="hoverable"> and then put this styling at the top of the file or in an external CSS file:
a.hoverable:hover{background-color:#006db9}
Or you can just use Javascript to avoid using the anchor tag.
I'd recommend JQuery.