I'm trying to change the background color of the selected item but can't get it work.
HTML:
<table class="select_payment_method_table">
<tr>
<td class="payment_details_cc">
<input id="visa1" type="radio" name="visa1" value="a1" checked="checked"/>
<span class="visa_card_img"> Credit Card (VISA / MasterCard)</span>
<div class="clearfix"></div>
<div class="payment_img_main"><img src="image.png"></div>
</td>
</tr>
I tried this, but it doesn't work:
CSS:
.select input[checked]
{
background-color:white;
}
Your syntax is a bit wrong (assuming you do have a .select class, because it's not in your HTML):
.select input:checked
{
background-color:white;
}
For further reading on :checked selector
If you want to select the radio element itself, you could use this:
input[type="radio"]:checked { background-color: blue; }
If you wish to select the background of the element text next to the radio element, then you could use this:
input[type="radio"]:checked+span { background-color: blue; }
And combine the rules if you want both. Hope that helps.
input:checked
{
background:#ff0000;
}
There is no class called select. This style is supported only by Opera.
Related
<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
How to Write Css style for this type of DIV element using the attribute disabled
Use the attribute selector [attr=value]
.td[disabled=disabled] {
color: red;
}
<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
You can select your div by using its disabled attribute. Here is the the CSS code which select that div by its attribute.
CSS Code-
div[disabled="disabled"]{
color:white;
background-color:green;
}
you can use :
.td[disabled="disabled"]{
background-color: red;
}
<div class="td" disabled="disabled">PPPPPPPPPPPPPPPPPPPPPPPPPP</div>
}
I have a class named .color-blue with color:blue !important.
And I have a class inputContent with an input and a div, like this:
<div class="inputContent">
<input>
<div class="icon color-blue" style="color:red !important;">TEST</div>
</div>
and I want on input focused, .icon become the color of the class without put color:blue !important in inputContent or other.
I have tested
.inputContent input:focus ~ .icon {
color:inherit;
}
but nothing.
You can do it with jquery:
$("input").focus(function(){
$(".icon").attr("style", "color:blue");
});
try this one:
<style>
.icon{
color: red;}
input:focus + .icon{
color: blue;
}
</style>
<div class="inputContent">
<input>
<div class="icon">TEST</div>
</div>
I just want to "remove" or "cancel" the color of style="color:red !important;" and replace the color by the class color-blue without add lines like color:blue;
<td class="col" style="display:none">AAA
<span prop="1" class=" clear-icon " style=""></span>
</td>
I want to use pure css to hide text "AAA" to show span btn.
Is there a way to do it in pure css?
If your design is not really responsive, I mean you can just need to set fixed font-size for the inner span, I think we have a clean solution like this. The idea is to set font-size of the td to 0, it will hide the text node completely:
.col[style*="display:none"] {
display:table-cell!important;
font-size:0;
}
.col > span {
font-size:20px;
}
Demo.
You can use visibility property but this will reserve the space for text "AAA":
.col {
visibility:hidden;
}
.clear-icon {
visibility:visible;
}
Also, if you can't remove display:block !important; from your td tag just add !important rule in CSS
.col {
display:block !important;
visibility:hidden;
}
http://jsfiddle.net/vLNEp/4/
<table><tr><td class="col"><span class="hidden">AAA</span>
<span prop="1" class="clear-icon"></span>
</td></tr></table>
.col .hidden {position:absolute;top: -9999px; left: -9999px;}
.col {
visibility:hidden;
}
.col span {
visibility:visible;
}
<table>
<td class="col">
AAA <span>Show Me</span>
</td>
</table>
Is there any way to have a label respond to focus. I have some code where the textfield has a different style on focus. The label also however needs a slightly different style. I tried this but it did not effect the label.
#header .search label {
background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search label:focus {
background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
padding-left:20px;
height:20px;
float:right;
}
#header .search input {
padding:0px;
border:0px;
width:140px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
padding:0px;
width:190px;
height:20px;
float:left;
padding-right:10px;
background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}
The label contains an image and the other part of a round corner and it too must change colour in order for the field to look correct.
Any ideas,
Marvellous
You can't actually give focus to a label. It's not a focusable form element. Besides, even if you could do that, then whatever previously had focus (that means your input) would lose it to the label anyway.
You may have to restructure your HTML (and modify your CSS accordingly) so that you can select input:focus and then that input's corresponding label. For instance, if you moved your label after your input and used the following CSS selector for your label, you should be able to accomplish what you want.
#header .search input:focus + label
BoltClock's answer is the more semantic, lightweight way of achieving this functionality. However it's not always possible to have a specific HTML structure (especially to facilitate a minor feature like this) and CSS lacks the ability to traverse up the HTML hierarchy. To get around that, here are two alternatives. The first is coming soon (CSS spec 4) and the second is our old mate Javascript.
First up, CSS4's :focus-within pseudo selector. This does exactly what it says on the tin (scopes based on any child element's active focus state). Read more about the spec here. So assuming you have a HTML structure of:
<div class="input-wrapper">
<label for="elem">Label Text
<input name="elem" id="elem" type="text" />
</label>
</div>
you could scope the 'focussed' label by simply:
label:focus-within{}
by the same token, you could also scope the parent div with:
div.input-wrapper:focus-within{}
Magical. But not for use today :(
Second up, if you're already using a JS selector engine (i.e. jQuery, Sizzle, etc.), you could also do something along the lines of:
$('input').on("focus", function(){
var input = $(this);
// assuming label is the parent, i.e. <label><input /></label>
var label = $(this).parent();
label.addClass('focussed');
input.on("blur", function(){
label.removeClass('focussed');
input.off("blur");
});
});
This is untested but the essence of what this achieves is using a class rather than the :focus pseudo selector. So you can add your focussed styles to label.focussed{}. I've added (and self-removed) the blur handler to facilitate removing the class.
Now using Flex box will solve this. Have the label element follow the input element in the HTML. Then use flex-direction: column-reverse to change its position to appear above the input element. You can then use the input:focus + label: {} to target the label.
.input-container {
display: flex;
flex-direction: column-reverse;
}
.input-container > input {
/* your input styles */
}
.input-container > input:focus + label {
/* targets the label when the input receives focus */
color: red;
}
<div class="input-container">
<input type='email' />
<label>Email</label>
</div>
use:checked instead of :focus and you must give id,name,value into 'input'.
Found a good solution - order property made a trick:
input:focus {
background-color: #F2FFF0;
}
* {
font-family: "Arial";
font-size: 13px;
}
div.settings {
display:grid;
grid-template-columns: max-content max-content;
grid-gap: 7px
}
div.settings label {
text-align:right;
padding-top: 3px
}
div.settings label:after {
content: ":";
}
div.settings input:focus + label:before {
content: "\25B6 ";
font-size: 12px;
color: red;
}
input {
border: 1px solid #ccc;
padding: 2px 4px;
font-size: 13px;
}
<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>
Is it possible, other than what I'm doing because it doesn't seem to work, to do this? I want to be able to have subclasses that are under a class to use the CSS specifically for that class.subclass.
CSS
.area1
{
border:1px solid black;
}
.area1.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2.item
{
color:blue;
}
HTML
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
<div class="area2">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
So that I can just use class="item" for the elements under the parent css class "area1","area2". I know I can use class="area1 item" to get this to work, but I don't understand why it has to be so verbose about it. Shouldn't the css subclass look at what parent class it is under in order to define it?
Note: this works in IE (using 7 right now), but in FF it does not, so I'm assuming this isn't a CSS standard way of doing something.
Just need to add a space:
.area2 .item
{
...
}
FYI, when you define a rule like you did above, with two selectors chained together:
.area1.item
{
color:red;
}
It means:
Apply this style to any element that has both the class "area1" and "item".
Such as:
<div class="area1 item">
Sadly it doesn't work in IE6, but that's what it means.
Your problem seems to be a missing space between your two classes in the CSS:
.area1.item
{
color:red;
}
Should be
.area1 .item
{
color:red;
}
do you want to force only children to be selected? http://css.maxdesign.com.au/selectutorial/selectors_child.htm
.area1
{
border:1px solid black;
}
.area1>.item
{
color:red;
}
.area2
{
border:1px solid blue;
}
.area2>.item
{
color:blue;
}
Just put a space between .area1 and .item, e.g:
.area1 .item
{
color:red;
}
this style applies to elements with class item inside an element with class area1.
Just put a space between your classes
.area1 .item
{
...
}
Here's a very good reference for CSS Selectors.
Following on from kR105's reply above:
My problem was similar to that of the OP (Original Poster), only occurred outside a table, so the subclasses were not called from within the scope of the parent class (the table), but outside of it, so I had to ADD selectors, as kR105 mentioned.
Here was the problem: I had two boxes (divs), each with the same border-radius (HTML5), padding and margin, but needed to make them different colors. Rather than repeat those 3 parameters for each color class, I wanted a "superclass" to contain border-radius/padding/margin, then just individual "subclasses" to express their differences (double quotes around each as they're not really subclasses - see my later post). Here's how it worked out:
HTML:
<body>
<div class="box box1"> Hello my color is RED </div>
<div class="box box2"> Hello my color is BLUE </div>
</body>
CSS:
div.box {border-radius:20px 20px 20px 20px; padding:10px; margin:10px}
div.box1 {border:3px solid red; color:red}
div.box2 {border:3px solid blue; color:blue}
Hope someone finds this helpful.
That is the backbone of CSS, the "cascade" in Cascading Style Sheets.
If you write your CSS rules in a single line it makes it easier to see the structure:
.area1 .item { color:red; }
.area2 .item { color:blue; }
.area2 .item span { font-weight:bold; }
Using multiple classes is also a good intermediate/advanced use of CSS, unfortunately there is a well known IE6 bug which limits this usage when writing cross browser code:
<div class="area1 larger"> .... </div>
.area1 { width:200px; }
.area1.larger { width:300px; }
IE6 IGNORES the first selector in a multi-class rule, so IE6 actually applies the .area1.larger rule as
/*.area1*/.larger { ... }
Meaning it will affect ALL .larger elements.
It's a very nasty and unfortunate bug (one of many) in IE6 that forces you to pretty much never use that feature of CSS if you want one clean cross-browser CSS file.
The solution then is to use CSS classname prefixes to avoid colliding wiht generic classnames:
.area1 { ... }
.area1.area1Larger { ... }
.area2.area2Larger { ... }
May as well use just one class, but that way you can keep the CSS in the logic you intended, while knowing that .area1Larger only affects .area1, etc.
The class you apply on the div can be used to as a reference point to style elements with that div, for example.
<div class="area1">
<table>
<tr>
<td class="item">Text Text Text</td>
<td class="item">Text Text Text</td>
</tr>
</table>
</div>
.area1 { border:1px solid black; }
.area1 td { color:red; } /* This will effect any TD within .area1 */
To be super semantic you should move the class onto the table.
<table class="area1">
<tr>
<td>Text Text Text</td>
<td>Text Text Text</td>
</tr>
</table>
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div>
each item in the class is its own class
.item1 {
background-color:black;
}
.item2 {
background-color:green;
}
.item3 {
background-color:orange;
}
kR105 wrote:
you can also have two classes within an element like this
<div class = "item1 item2 item3"></div
I can't see the value of this, since by the principle of cascading styles, the last one takes precedence. For example, if in my earlier example I changed the HTML to read
<div class="box1 box2"> Hello what is my color? </div>
the box's border and text would be blue, since .box2's style assigns these values.
Also in my earlier post I should have emphasized that adding selectors as I did is not the same as creating a subclass within a class (the first solution in this thread), though the effect is similar.
Additionally to the space needed between the nested classes:
.area2 .item
{
...
}
There is a css precompiler called Sass that could help you with the verbosity of css. It uses the extension .scss, you can search for the complete way to use it, but when using, the sintaxis of your code could be reduced to something like:
.area1
{
border:1px solid black;
.item
{
color:red;
}
}
.area2
{
border:1px solid blue;
.item
{
color:blue;
}
}