Selecting checked element in CSS [duplicate] - html

This question already has answers here:
CSS :selected pseudo class similar to :checked, but for <option> elements
(4 answers)
Closed 8 years ago.
I have an issue about selecting element inside the dropdown. Here is the fiddle: http://jsfiddle.net/H656H/
<select id="razred" name="razred">
<option hidden selected><?php echo $razred; ?></option>
<option>1.A</option>
<option>1.B</option>
<option>1.C</option>
<option>1.Č</option>
<option>1.D</option>
<option>1.E</option>
<option>2.A</option>
<option>2.B</option>
<option>2.C</option>
<option>2.Č</option>
<option>2.D</option>
<option>2.E</option>
<option>3.A</option>
<option>3.B</option>
<option>3.C</option>
<option>3.Č</option>
<option>3.D</option>
<option>3.E</option>
<option>4.A</option>
<option>4.B</option>
<option>4.C</option>
<option>4.Č</option>
<option>4.D</option>
<option>4.E</option>
</select><br />
So, I want to style the element after the user clicks it. So, only when user select an his selection receives a styling.
I think there has to be some kind of CSS pseudo-selector for this selected element inside dropdown.
Are there any CSS selectors for that?
Thank you all!

There is no pseudo selector for marking select boxes the way you imagine. So the answer to your original question is No :(
But if you dont mind using a tiny bit of JavaScript then you can emulate the feature you desire. You can add a class to the select box's onchange method. Ideally this should be done from the bottom of the page inside a script tag. I m doing it inline only as a demo:
<select id="razred" name="razred" onchange='this.className="visited"'>
And then you could just define the custom class the way you want
.visited {
color: #f00;
-webkit-appearance: none; /*required for webkit based browsers*/
}
JSFiddle: http://jsfiddle.net/9K5h2/1

Edit: removed incorrect part of answer.
The answer to your actual question regarding css:
From a previous question
#razred option:checked { color: red; }

The focus selector will do something that's close to what you are looking for
#razred:focus{
color: blue;
}
Updated fiddle

Related

Can a CSS pseudo-class be declared on an HTML element?

Is it possible to set a CSS pseudo-class on an HTML element? In this particular case, I would like a certain <div> to have the last-child property.
I asked myself this question when IE11 wouldn't recognize a specific <div> as a last-child while other browsers did. I have found a work around and at this point I just want to know whether setting a pseudo-class on an HTML element can be done.
A coworker suggested this may be in fact done using React framework. However, I have not been able to find anything suggesting this is possible.
No.
Pseudo-classes are used to define the state of an element.
Yes, you can.
This would also have to either be in a JS or CSS file, not an HTML file as far as I know.
For example, I was using :nth-child(4) on an img and can't see it being different with div.
This is how I was using it in my JS:
$('#recipeStack img:nth-child(4)').css({
'transform' : 'translate(160px, -160px)',
'transition-delay' : '0.3s',
'opacity' : '1'
});
And should turn out fine in your case in a CSS file too:
.parent > div:last-child {
background-color: red;
color: white;
}

disabled styling for DIV element [duplicate]

This question already has answers here:
How to Style a disable DIV element
(3 answers)
Closed 5 years ago.
I am trying to style disabled state for div I have code
<div disabled> Welcome </div>
<style>
div:disabled{
background-color:#f1f1f1;
}
</style>
I don't have any class or ID present on the element. It is system generated. I want make the background color light gray.
Try to use the Attribute Selector:
div[disabled]{}
See for more Information:
https://www.w3schools.com/css/css_attribute_selectors.asp
This can be achieved using attribute selectors, in this case "disabled" is the given attribute:
div[disabled] {
background-color: #f1f1f1;
}
For more information, here is a very useful reference guide to using data attributes on MDN
Here is the specific guide on Attribute Selectors
Attribute selectors select an element using the presence of a given attribute or attribute value.
In the div, disabled is an attribute. So use an attribute selector.
<div disabled> Welcome </div>
<style>
div[disabled] {
background-color:#f1f1f1;
}
</style>
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
css to Attribute
div[disabled]{
background-color:#f1f1f1;
}

Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 8 years ago.
I have an application where styles are defined as
select {
border: 1px solid #6FA7D1;
outline:0;
height:25px;
padding-left: 5px;
font-family:Arial;
font-size:12px;
transition: all 0.8s;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
so, every <select></select> will get the same style, which is expected, but, I'm using some third party plugins like jqGrid and I don't want to apply same style on for instance <select> rendered in jqGrid pager. This <select> has some class.
Is there some way to tell in CSS not to apply on DOM with certain class?
Please don't focus strictly on this <select> in jqGrid, I have more situations when I can use such exclusion.
You can use the :not selector to prevent application under certain circumstances, e.g:
:not(selector) select
Where selector relates to either a jQGrid id or class
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector.
This basically says target select elements which arent a child of selector (in this case jQGrid)
You can use :not to exclude any subset of matched elements.
:not(div) > span {
color: red;
}
<span>Make me red!</span>
<div><span>...but not me...</span>
</div>
http://jsfiddle.net/iaezzy/1s5g5mjn/
.element:not(.exclude) {
background: green;
}
.exclude {
background:red;
}
What about Can I write a CSS selector selecting elements NOT having a certain class? in CSS3?
select:not(.someClass) {
/* Styles */
}
You can't, the only option would be to:
Put the <select> styling into a class, e.g. .select, and add that <select class="select"> to all elements that you want to be styled.
Add a class, e.g. select-jqGrid, that overrides all default styling from the select and add that to all <select> elements inside the jqGrid.

CSS equivalent of DOM focus()

I want to set the focus on a button on particular event.
The pseudo code for this can be,
if (event == "EventX") {
document.getElementById('myAnchor').focus();
}
is there a CSS equivalent for document.getElementById('myAnchor').focus();?
You can't change the state of an element using CSS. While CSS can style elements based on specific states, it cannot actually trigger those states. To do that, you use JavaScript, not CSS, since the DOM APIs are implemented in JavaScript, not CSS.
I think am getting confused here, as #Paulie commented, I think what you are looking for is to autofocus an element on load than you cannot do that with CSS, if you want, you need can use autofocus attribute on the element you want to get the focus on, like
<input type="text" autofocus />
If you want to style the focused element then you need to use :focus pseudo
input[type=text]:focus {
border: 1px solid red;
}
Demo
As I read your id it says myAnchor so you can write your selector like — to make it more specific
#myAnchor:focus {
/* Styles goes here */
}

Multiple Styles In Option Element [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Styling select options
I am wondering if it is possible to apply two styles within an option element? For example, in my code below, I would like my product name to be of style color:black; while the price be of another style color:red; font-weight:bold;. I have tried wrapping my price around span.price but that did not work.
<select>
<option>Apple <span class="price">$1.00</span></option>
<option>Banana <span class="price">$2.50</span></option>
<option>Cherry <span class="price">$1.50</span></option>
</select>
option styles are styled in a way native to the platform. You cannot do what you desire without changing the markup (and/or using JavaScript)
Try this CSS in the of your HTML document, or in your external stylesheet (strip out the <style> tags if you put it in an external stylesheet):
<style type="text/css">
select option { color: black; }
select option span.price { color: red; font-weight:bold; }
</style>
By doing this, you are basically saying "All options in my select should have black text color". Then, you're overriding that by saying "Any spans with a class of "price" inside an option inside my select should have a red text color."