Let say I have following class into my general.css. this css has been applied on default.aspx.
In general.css there is class checkbox{ .... }
on default.aspx I have one checkbox with
<input type='checkbox' />
so when page loads class checkbox applied on my checkbox. I want to prevent to apply checkbox class on this
checkbox. condition is I can't change general.css also I can't remove reference of general.css from default.aspx.
only can do with input tag.
checkbox is not a class,
.checkbox is a class, notice the dot in front of "checkbox"
to limit the CSS styling to a specific element, you can use ID.
<input type='checkbox' id='checkboxWithStyle'/>
in the CSS:
#checkboxWithStyle{
background-color:red;
}
Let's say you have css as follows:
input[type='checkbox'] {
border: 2px solid red;
}
Add another class:
input[type='checkbox'].notdefault {
border: none;
}
Then change your input:
<input type="checkbox" class="notdefault" />
The new class can be in another css file or embedded in the aspx page.
Related
How i can select and style an <input type=checkbox disabled checked> in SASS?
I tried this but don't put any style:
input {
&:checked &:disabled{
background-color:red;
}
}
Here is the code you can try.
input {
&:checked:disabled{
background-color:red;
}
}
However the styles won't work for checkbox. As checkbox can not be styled natively yet. See for reference css - Why Cannot Change Checkbox Color Whatever I Do?
If I have a selector defined for input:show_invalid
<style>
input:show_invalid {
background-color: red;
}
</style>
When I reference it in this HTML, the input does not show as red:
<html>
<input type='text' class='input:show_invalid'/>
</html>
In the CSS code, classes are marked by a ., not a : at the beginning. In the HTML code, you just write the class name into the class atrribute - without the dot or anything else.
so your code has to be
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
There's a few things wrong with your code.
You're using a non-existing pseudo-class, show_invalid. You probably meant to use the invalid pseudo-class.
You are targeting all <input> elements (not a class) with a pseudo-class show_invalid with your CSS selector but adding the entire string input:show_invalid as a class in your html.
You either wanted to use the invalid pseudo-class:
input:invalid {
background-color: red;
}
<input type='email'/>
or to target a class:
input.show_invalid {
background-color: red;
}
<input type='text' class='show_invalid'/>
Try
<input type='text' class='show_invalid'/>
You're already in an element
A class selector should precede with a period eg. specify a simple class show and access the css as
.show {
background-color: red;
}
OR
if you want the styling to be same, then replace the class name to
class='show_invalid'
Hope it helps
I have a label with "for="the pointer to the checkbox input"" and as long as I know, this for can be added only for label. Therefore, I need to add inside of the label a <button>(I need it), but the click event isn't working properly - it doesn't check the checkbox the for is pointing to.
What are the possibilities I can use here if I must place <button> inside the label, with only html+css coding?
some code for example:
<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>
It turns out you can make a <button> operate an input, but only if you put the <label> inside the <button>.
<button type="button">
<label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">
Although this contravenes the W3C specs:
The interactive element label must not appear as a descendant of the button element.
https://www.w3.org/TR/html-markup/label.html
You can do dis:
<label>
<button></button>
</label>
CSS
label {
cursor: pointer; // not necessary but probably a good idea.
display: block; // depending on your structure.
}
button {
pointer-events: none;
}
The display: block on label will only be necessary so that the bounding box of the label fully encapsulates it's children (the button in this case).
You can use transparent pseudo element that overlays the checkbox and the button itself that will catch mouse events.
Here's an example:
html:
<label>
<input type="checkbox">
<button class="disable">button</button>
</label>
css:
.disable{pointer-events:fill}
label{position:relative}
label:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
background: transparent;
top:0;
left:0;
right:0;
bottom:0;
}
HTML:
<label for="whatev"
onclick="onClickHandler">
<button>Imma button, I prevent things</button>
</label>
JS:
const onClickHandler = (e) => {
if(e.target!==e.currentTarget) e.currentTarget.click()
}
Target is the click target, currentTarget is the label in this case.
Without the if statement the event is fired twice if clicked outside of the event preventing area.
Not cross browser tested.
The best solution is to style is like a button.
If you're using a CSS framework, like bootstrap, you can give the label classes such as btn and btn-default. This will style it like a button. You may need to adjust the css property of the line-height manually like so:
label.btn {
line-height: 1.75em;
}
Then, to get the on click styles as a button, add these styles:
input[type=radio]:checked ~ label.btn {
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
This will take the input that is checked and give the next label element in the dom that has the class btn, bootstrap btn-default button clicked styles. Adjust colors as fit.
I have the following html:
<label>
<input type="checkbox" value="cb_val" name="cb_name">
my checkbox text
</label>
With CSS I added a background-color to the <label> tag.
label { background-color:#333; color:#FFF; }
Now I'd liked to change the background color of the label when the checkbox is checked.
I know how to do it with javascript, but is there a way to to it just using CSS?
I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.
I still hope to fix this without javascript, does anyone have a clue?
UPDATE:
As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure.
I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!
Or I can apply the background color to the label and the checkbox both.
Thanks everyone!
You can achieve this with pure css like so,
<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
my checkbox text
</label>
With this css,
label { background-color:#333; color:#FFF; }
input[type="checkbox"]:checked + label {
background: brown;
}
JSFIDDLE
Keep in mind
The label has to be after the checkbox so you will need to style it around more to keep the same look you had.
Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.
You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.
http://jsfiddle.net/QdDpL/
HTML
<label>
<input class="check" type="checkbox" />
<span class="label-text">Checkbox</span>
</label>
CSS
label {
background: yellow;
}
label .label-text {
background: cyan;
}
label input.check:checked + .label-text {
background: lime;
}
You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.
See the following links for browser support on the sibling selector:
http://caniuse.com/css-sel2
Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.
I have the following style for an input box
input[type="text"] {
height:16px ;
font-size:14 ;
border-radius: 5px ;
}
What I want to do is have this style on most of the inputs but I want to make a class of input so I can add background color, etc. How can I do this in the syle sheet?
Use classes
Define a class with the different style
input[type="text"].different {
background-color:red;
}
and apply it to the input element in the html
<input type="text" class="different" />
This input will have all the properties of the generic rule input[type="text"] and then apply all the properties of input[type="text"].different class.
The input[type="text"].different is more important so in case of overlapping properties the ones in the .different class will prevail.
Read https://developer.mozilla.org/en-US/docs/CSS/Class_selectors and https://developer.mozilla.org/en-US/docs/CSS/Specificity
input[type="text"].yellow {
background-color: yellow;
}