This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 7 months ago.
I want to make HTML checkboxes have a certain set of CSS styling only when it's been selected. E.g. change colour or change text weight, etc.
I am confused about whether I should use a function or if there is an existing method that I could use.
I have gone through these questions:
css checkbox style for border color
How to change checkbox's border style in CSS?
You don't need any function for this, you can do this with good understanding of css selectors
You can try:
input[type="checkbox"]:checked+span {
text-decoration: line-through;
color:red;
}
and define your text box like
<input type="checkbox" ><span>Some text label for checkbox</span>
Here is an example
You can control the styling of checkboxes or other inputs based on their current state through CSS selectors like this:
input[type='checkbox'] {background-color:red;}
input[type='checkbox']:checked {background-color:blue;}
In JavaScript, use a function that you would call the onclick method on.
Example:
<div>
<p id ="color" onclick="changeFunction()">This text can change colors</p>
<button id="changeColor" onclick="changeFunction()"> Click Me</button>
</div>
<script>
function changeFunction(){
var words = document.getElementById('color');
words.style.color = 'red';
}
</script>
Here's a working Jsfiddle to show you this example: https://jsfiddle.net/z4gr8wn5/
This should give you a base idea of how you should go forward with figuring out what you need to find out.
If you are looking on how to change a checkbox style when the user clicks then this will help you out https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox
Making use of the :checked css pseudo-class you will be able to change the element style without using Javascript.
You can read more about it here.
/* Change color */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px red;
}
/* Change label color */
input:checked+label {
color: blue;
}
<input type="checkbox" name="my-checkbox" id="example">
<label for="example">Check me!</label>
It might be that you want to toggle a class, and here is a example if that is the case.
<style>
.mystyle {
font-size: 25px;
}
</style>
<div onClick='this.classList.toggle("mystyle");'>
example1
</div>
or maybe add a class to an object you clicked.
<style>
.mystyle {
font-size: 25px;
}
</style>
<div onClick='this.classList.add("mystyle");'>
example2
</div>
or, if you really want to be in control you can send the clicked object to a function and manipulate it there, in any way you like.
<div onClick='myFn(this);'>
example3
</div>
<script>
function myFn(that) {
that.style.color = "blue";
that.innerHTML = 'You clicked me!';
}
</script>
Related
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 6 years ago.
In javascript, you can easily execute onclick events directly from the html element:
<div onclick="..javascript here.."></div>
I know that you can change the css styles with the <style> tag, but I was wondering if you were able to execute it similarly to the example below:
<div onclick="..css here.."></div>
if you want to do it purely through css you have to use :active or maybe :focus:
div:hover { color: red; } /* mouse-over */
div:active { color: red; } /* mouse-down (this cause also focus) */
input:focus{ color: red; } /* got focus (by tab key or mouse-down) */
/* for <a> element: */
a:link { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */
Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..
Also, if you want to change css class or inline styles, you could do as following:
<div onclick="this.style['border'] = '2px solid red';">Click me</div>
There is, but the element needs to have a tabindex attribute.
With a tabindex on the element you can use:
element:focus {
/* some_CSS; */
}
'some_CSS' will kick in when the element is clicked.
You can use javascript to change the style of a div or any other element. But I donot know whether there is a way to change css by onclick event without using javascript.
I can explain my method.
<script>
function change_css(){
document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>
The above code will help you change the style by changing the class, provided you have already created a class with css. It replaces all the previously provided classes for that div and add the new one.
To add an additional class to the div without replacing the existing classes, use the following statement in javascript:
document.getElementById('change_css').className+=' newClassName';
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 7 years ago.
I'm trying to apply the hover effect to two distinct elements at the same time, which means that when I mouseover one element I was the other element to be with hover effect as well. The two elements are one simple text and one icon (using font awesome). Is there any way to do this with html and css only? Or do I need to use javascript?
Thank you very much!
I think this is what you mean. And if it is, then it is by far the easiest way.
HTML:
<body>
<button class="button">Click Me!</button>
<p class="text">Hello World</p>
</body>
CSS:
.button:hover{ //To change button color
background-color: #436242;
}
.button:hover + .text{ //To change text color
background-color: #436242;
}
So pretty much just add the "+" then the second div.
You could do it with css as alireza told you but you need an strict html code. The easiest way by far is jqueryand quite easy to implement and understand.
With this code:
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
You just add the class hover to whatever element with the class element you hover. Then just add css properties to class hover:
.hover {
color:red;
}
JSFIDDLE
Edited: after reading your comment... if you want a different hover effect for each element then as easy as with this html:
<p class="element text">Text</p>
<p class="element icon"></p>
you just toggleClass diferent class for element like:
$('.element').on('hover', function(){
$('.text').toggleClass('hover1');
$('.icon').toggleClass('hover2');
});
NEW JSFIDDLE
To add it to your project don't forget the script tag and on load function (jsfiddle does it automatically):
<script type="text/javascript">
$(document).ready(function () {
$('.element').on('hover', function(){
$('.element').toggleClass('hover');
});
});
</script>
I have read quite a few articles but still couldn't figure out. Tried lots of methods they provided but still no luck.
I have this in my html
Button 1
this is what happens to css when hovered
.btn-success:hover,
.dropdown-toggle.btn-success {
background-color: yellow;
}
I want to change the background color to blue using js.
I'm not sure why you'd need to do this with js when you could just change it in your CSS. But if you must you could just add a class to the element using
$('.btn-success').addClass('hoverClass');
And in your CSS
.hoverClass:hover {
background: green;
}
You can achieve this by changing the class assignment.
First give the link an ID so we can isolate it within the dom.
Button 1
To change the appearance of that link you could change the class to btn btn-primary btn-lg", the default value for 'btn-primary' is blue.
document.getElementById("myButton").className = "btn btn-primary btn-lg";
I did not know why you turn to js as css is the best choice for what you need. I guess you might find the css for the link is somehow "tricky": it needs to written in the order of "lvha", i.e. a:link, a:visited, a:hover and a:active
There are two Javascript events you need, the «onmouseover», that is triggered when the mouse move over the link, and the «onmouseout», that is triggered when the mouse moves aways from the link. I wrote a short example to you.
<html>
<head>
<script type="text/javascript">
function hoverIn ( element )
{
element.style.background = "blue";
}
function hoverOut ( element )
{
element.style.background = "none";
}
</script>
</head>
<body>
Click Me
</body>
I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.
When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}