<html>
<head>
<style>
input[type='text'], select {
background: blue
}
.error {
background: red
}
</style>
</head>
<body>
<input type="text" class="error"/>
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
If the class .error has background red than it must be red. Even if input[type="text"] has a blue background. Tested in IE and GC.
The reason for the problem you're seeing, is that input[type=text] is more specific than .error, so it will override it. Use a more specific selector:
input.error
Or if you want to really be safe:
input[type=text].error
More information about CSS specificity, and how it's calculated
Another approach would be to keep the current selector, but add the !important keyword on the rule:
.error { background: red !important; }
That would instantly make it override any other rules matched for the element. Beware, it's a very powerful tool, and may lead to unexpected results in the future.
Use .error { background: red !important }
Be aware of the limitations this has, please see: !important rules (CSS 2.1 Section 6.4.2)
Try this
<html>
<head>
<style>
input[type='text'], select { background: blue }
.error { background: red; }
input.error { background: red; }
</style>
</head>
<body>
<input type="text" class="error" />
<select class="error">
<option>non-sense</option>
</select>
</body>
</html>
Related
I have a dropdown menu with some options inside of it. An option has 2 text, text1 and text2.
Take a look at simplified code below to see what happens when an option is hovered:
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
Expected behaviour when an option is not hovered, it will be the color defined in its div (in this case, text1 is green and text2 is red. When it is hovered, it will be the one defined in its parent div, in this case purple.
I am surprised !important in the code above does not make test1 and test2 in purple color.
How can I emphasis the purple rule ?
Thank you
You can't.
!important only affects the cascade. It cannot force the value of a child element's property to become inherit.
If you want to change the colour of a child element, then you must match it explicitly.
e.g.
.hh1, .hh1 > .hh2 { color: purple; }
You haven't put any hover effects in your style tag That's why your hover effect isn't applied.
Take a look I have made changes to your code.
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
.hh2:hover {
color: purple;
}
.hh3:hover {
color: purple;
}
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
Use color:inherit on :hover , also you can write your :hover effect in one line.
<!DOCTYPE html>
<head>
<style>
.hh1 { color: purple !important; }
.hh2 { color: green; }
.hh3 { color: red; }
.hh2:hover , .hh3:hover {
color: inherit;
}
</style>
</head>
<body>
<div class="hh1">
<div class="hh2">
test1
</div>
<div class="hh3">
test2
</div>
</div>
</body>
</html>
I don't know if browsers support this or not. Works fine in a div, but that's not very semantic.
I've got a rough mock up here of what I'm looking for:
https://jsfiddle.net/mgifford/xjkcgod8/5/
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
#orange {
color: orange;
}
#apple {
background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/flatastic-7/512/Apple-icon.png");
background-repeat: no-repeat;
background-size: 30px 10px;
}
#cherry {
background-color: red;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple" id="apple">Apple</option>
<option value="orange" id="orange">Orange</option>
<option value="cherry" id="cherry">Cherry</option>
</select>
</body>
</html>
Essentially I want to see a country name & flag associated for each item in the list. I just want to do a country dropdown, but HTML is failing me (or more likely my CSS chops).
you cant have background image for option tag. you can use some plugin like this if need to insert image in option.
You can use a custom jquery plugin like in this reference:
http://www.marghoobsuleman.com/jquery-image-dropdown
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: red;
}
</style>
</head>
<body>
<textarea readonly cols=200 rows=40>
<span>
hahahahaha
</span>
</textarea>
</body>
</html>
in this example，is there anyway I can make the text in <span> to be red in color
or can it be done by some other html tag like <textarea>?
No, you can't put an HTML element inside of a form field tag like textarea or input. You can, however, make the color in a textarea red using normal CSS.
textarea {
color: red;
}
<textarea>text</textarea>
An alternative method you can also use is to adjust the styles of the placeholder attribute.
link to jsfiddle
Hope this helps.
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}
Who are you?<br />
<textarea readonly rows="4" cols="50" placeholder="Describe yourself here..."></textarea><br />
<input type="text" placeholder="red" />
OK, now I konw I can't insert into
and i have got another way
<style type="text/css">
.testDiv{
bottom: 36px;
height: calc(100vh - 280px);
resize: none;
overFlow-x:scroll;
overFlow-y:scroll;
}
.keyword{
color:red;
}
</style>
<div class='testDiv' id="keyword">
one<br>
two<br>
three<br>
<span class="keyword">four</span><br>
</div>
just add scroll,height css in div
I would like to display apple in green color (bg color) instead of mango in red colour (bg color) on click on the mango, I know it's possible with hover or using javascript. Is there any way to do it with css on mouse click?
#two
{
display:none;
}
#one
{
background-color :red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
I think you can't do what you want with only CSS, but you can use the :active selector to change it while clicking on it.
See that: http://www.w3schools.com/cssref/sel_active.asp
It depends on what you mean by "click" and "display".
If you mean can you toggle the appearance of the "apple" div by just clicking the "mango" div, then NO...you need javascript.
However, if you just want to see the "mango" div while the mouse button is clicked and held down, then the pseudo-class :active is what you require...in conjuction with a suitable sibling selector.
#two {
display: none;
background: green;
}
#one {
background-color: red;
}
#one:active + #two {
display: block;
}
<div id="one">
<p>mango [click and hold]</p>
</div>
<div id="two">
<p>apple</p>
</div>
Note: This selector only works on siblings...it will not work on the p tag to affect the "apple" div.
which is best to use js for the click purpose.
CSS Only Solution
here is a simple hack to create the click functionality using css
for this purpose.here is a simple hack using checkbox and label.
label {
display: block;
background: red;
}
label:after{
content: "Mango";
}
#demo:checked + label {
background: Green;
color: white;
}
#demo:checked + label:after{
content: "Apple";
}
.hide{
display:none;
}
<input type="checkbox" id="demo" class="hide"/>
<label for="demo"></label>
in the following snippet, how come the strong selector overrides the id selector? Isn't an id selector considered more specific, thus having priority?
<!doctype html>
<html>
<head>
<title>Sample document</title>
<style>
strong{color:red;}
#abc {color:blue;}
</style>
</head>
<body>
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this
strong { color: red; }
#abc strong { color: blue; }
and if you wanted strong tags text to be the same as the p text then you would do this
#abc, #abc strong { color: red; }
strong { color: red; }
#abc strong { color: blue; }
#def, #def strong { color: red; }
<p id="abc">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
<p id="def">
<strong>ABC</strong>
DEF
</p>