How can I set the default style for a checkbox in jquery or javascript or even html code?
or in another way how to disable the styling for checkbox.
there is a external css file that set the style for all checkboxes, but I would like to override the style to default style for specific checkboxes.
thanks
I use css' !important whenever I want to override some values.
But most modern browsers allow specific css selector like
input[type="checkbox"] {
//insert style here
}
you can use this to manipulate any style specific to checkboxes.
good luck.
This can be done easiest by controlling the CSS that's styling your check box to begin with.
Instead of the CSS on your page laying styles for all constants (body img input). Instead assign classes to the individual items if you want them styled a special way.
So dont use:
input { background: #000; }
Use:
<style>
.mystyle { background: #000; }
</stlye>
</head>
<body>
<input type="checkbox" class="mystyle">
Check to make sure all CSS on your site is clear of constants, this will make sure everything is set to default on all your pages and only styled at your choosing.
You can use JQuery to reset a css value ... like
$(this).css("color","red");
------------samples------------
$(document).ready(function() {
/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");
/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});
});
Related
I want to remove HTML elements classes using CSS. What is the method of removing classes from HTML using CSS?
CSS cannot modify the classes applied in the DOM and is used only for visual styling.
To change classes of an element you have to use JavaScript
You can't. CSS is Cascading Style Sheets and is used only for styling, read more about CSS in this w3chools article.
For changing element's class you need to use Javascript, there are a bunch of methods to do this and most famous of them are pureJS DOM methods which you can learn here and of course amazing JQuery, both are not very hard and convenient but I prefer JQuery myself
You can't remove classes with CSS because that's for styling only and it can't modify the DOM. JavaScript hover, is able to do that. You could use this snippet to achieve that:
const classesToRemove = ['class1', 'class2', 'class3'];
const removeClassesFromElements = () => {
classesToRemove.forEach((className) => {
let elements = document.getElementsByClassName(className);
for (let element of elements) {
element.classList.remove(className);
}
});
};
document.addEventListener('DOMContentLoaded', (event) => {
removeClassesFromElements();
});
<h1 class="class1"></h1>
<p class="class2"></p>
<hr class="class3" />
CSS can't modify any HTML elements. But You can use pseudo classes for certain triggers.
Use :focus or :hover. Also you can use checked state of a hidden checkbox like
checkbox:checked + .btn {
color: #fff;
background-color: #6b15ce;
}
This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed last year.
When I inspect the html with IE Developer tools, I see that there is one inline style for a button:
I don't want any width property for this input element. How can I disable or overwrite this with empty width?
If you want to override inline styles then you need to add styles in your stylesheet with !important
for e.g.
width: auto !important;
Reference - CSS Specificity
You can disable inline styles for any given element using JavaScript:
Locate the button in the HTML document
Remove the button's style attribute
var button = document.getElementById('myButton');
button.removeAttribute('style');
Update for 2022+
If anyone else stumbles upon this in the present, you can do much more than remove an inline HTML style tag with JavaScript. You can keep the tag around in case you want to return it later. There are two ways you can do it!
One way: "Disabled" HTML property
I've heard tell that using disabled on the HTML tag will stop your browser from processing it. But I had trouble getting this to work on Firefox. Maybe someone can enlighten me about that!
<style class='style-class' disabled>
body { color: blue; }
</style>
So you'd just
$('.style-class').prop('disabled', true)
Another way: Changing the tag itself
Your browser will only parse styles within a style tag. So if you change the tag to anything else, you'll still be able to inspect it in the DOM just fine, but it won't treat it as a stylesheet.
(jQuery used for the explanation here)
$(style.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<nostyle>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
Then when you're ready to return the style, use this:
$(notstyle.selector).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $('<style>')
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
});
I have an image and when the image is clicked I want to reveal another image below it. I am looking for a simple CSS only solution.
Is that possible?
TL;DR!
input[type="checkbox"] {
content: url('http://placekitten.com/150/160');
appearance: none;
display: block;
width: 150px;
height: 150px;
}
input[type="checkbox"]:checked {
content: url('http://placekitten.com/170/180');
}
<input type="checkbox" />
A Pure CSS Solution
Abstract
A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.
Utilize the :checked pseudo class - attach it to a pseudo element of a checkbox (since you can't really affect the background of the input itself), and change its background accordingly.
Implementation
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
Demo
Here's a full working demo on jsFiddle to illustrate the approach.
Refactoring
This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we're not really applying a background image, but instead setting the element's content, we can omit the pseudo elements and set it directly on the checkbox.
Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.
Enters the appearance property:
The (-moz-)appearance CSS property is used ... to display an element
using a platform-native styling based on the operating system's theme.
we can override the platform-native styling by assigning appearance: none and bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.
Implementation
input[type="checkbox"] {
content: url('images/black.cat');
display: block;
width: 200px;
height: 200px;
-webkit-appearance: none;
}
input[type="checkbox"]:checked {
content: url('images/white.cat');
}
Demo
Again, a live demo of the refactored version is on jsFiddle.
References
:checked
-moz-appearance/-webkit-appearance
Note: this only works on webkit for now, I'm trying to have it fixed for gecko engines also. Will post the updated version once I do.
Update: the appearance property is now widely adopted, so the use of vendor prefixes is redundant. Horay!
You could use an <a> tag with different styles:
a:link { }
a:visited { }
a:hover { }
a:active { }
I'd recommend using that in conjunction with CSS sprites: https://css-tricks.com/css-sprites/
some people have suggested the "visited", but the visited links remain in the browsers cache, so the next time your user visits the page, the link will have the second image.. i dont know it that's the desired effect you want. Anyway you coul mix JS and CSS:
<style>
.off{
color:red;
}
.on{
color:green;
}
</style>
Foo
using the onclick event, you can change (or toggle maybe?) the class name of the element. In this example i change the text color but you could also change the background image.
Good Luck
This introduces a new paradigm to HTML/CSS, but using an <input readonly="true"> would allow you to append an input:focus selector to then alter the background-image
This of course would require applying specific CSS to the input itself to override browser defaults but it does go to show that click actions can indeed be triggered without the use of Javascript.
Try this (but once clicked, it is not reversible):
HTML:
<a id="test"><img src="normal-image.png"/></a>
CSS:
a#test {
border: 0;
}
a#test:visited img, a#test:active img {
background-image: url(clicked-image.png);
}
You can use the different states of the link for different images example
You can also use the same image (css sprite) which combines all the different states and then just play with the padding and position to show only the one you want to display.
Another option would be using javascript to replace the image, that would give you more flexibility
No, you will need scripting to place a click Event handler on the Element that does what you want.
https://developer.mozilla.org/en/DOM/Event
https://developer.mozilla.org/En/Listening_to_events
Is there a way to remove CSS styles from an submit button so that the default browser style is applied?
You can set the styles to the system values,
input.overridecss {
background-color: ButtonFace;
color:ButtonText;
}
jsFiddle
Here is a list of values you can override, there is probably a better list but I'm lazy.
[Edit] Here is the Specification which has been deprecated lol,
so here is the correct way I guess,
input[type=button] {
appearance:push-button; /* expected from UA defaults */
}
from Appearence
You can do something like this:
button {
padding:0;
margin:0;
border:0;
background-color:transparent;
}
Hows that?
Store styles that you're applying programatically in a CSS class. When you want to go back to default remove the class.
Well, if you dont mind to use jQuery, you can use following code to remove all styles and classes from submit buttons.
$('input[type="submit"]').removeClass();
$('input[type="submit"]').removeAttr("style");
This will remove all classes as well as inline styles, thus system default button style will be applied to your all submit buttons.
I found that because I had:
* { border: 0; padding: 0; }
etc etc.
in my code which affects submit buttons so I put this is instead:
*:not(input) { border: 0; padding: 0; } etc etc.
This seemed to fix it.
If you're DEVELOPING the site - just remove the rules from the CSS file.
If you so wanted to, you could use Javascript/JQuery to remove/reset them based on some sort of condition if thats what you're looking for, ie:
$("#myButton").css("background","");
And so on...
If you're USING the site, but didn't build it - then you can (depending on your browser - i'm looking at Firefox 4) disable all or partial CSS from rendering using the web developer toolbar options... but I don't know if you can apply that as the 'default' setting for every site you load.
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.