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';
Related
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>
This question already has answers here:
How to completely DISABLE any MOUSE CLICK
(5 answers)
Closed 5 years ago.
I want to hide the cursor until my function is done but I can't find how to disable it. I mean I have found how to hide it and show it but when it's hidden I can still click So how to disable it?
window.document.styleSheets[0].insertRule('* {cursor: none;}', window.document.styleSheets[0].cssRules.length);
Meteor.call("lockTheMachine", machine.nameMachine, Session.get("loggedUser"), function(err, res) {
if (!err) {
Session.set("lastMachineUsed", machine.nameMachine);
window.document.styleSheets[0].insertRule('* {cursor: default ;}', window.document.styleSheets[0].cssRules.length);
} else {
console.error(err);
}
});
}
There's a CSS property for that called pointer-events.
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.
If you were to disable any click interaction on your whole site you could simply add:
body.block { pointer-events: none; }
And trigger the class .block programatically via Javascript.
You can solve your problem by simply adding the following style in your CSS file.
button {
pointer-events: none;
}
The problem with this is that the button is not clickable but the cursor is still displayed when you hover on the button.
To overcome this problem you can add "disable" attribute to the button and add the following CSS.
button {
cursor: not-allowed; // or cursor: none;
}
When you add the css "cursor": "not-allowed" or "none" to a input type or a button, the button is still clickable. For doing the input type or button non clickable you have to add "disable" attribute.
A disabled input element is unusable and un-clickable. The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.
But when you using bootstarp library, when you disabled a button or input type, then you can't see any cursor when hover onto that element. At the newest bootstrap library, we can find this rule:
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
So I assume that bootstrap tried to implement the cursor: not-allowed for disabled buttons, or input's.
So for doing this you have to overwrite the bootstrap class for it.
But it works fine when you don't link bootstrap library in your html.
e.g.:
HTML code:
<button class="disabled-button" disabled>
I am disabled and not clickable too
</button>
CSS code:
.disabled-button {
cursor: not-allowed;
}
or you can trigger ".disabled-button" class programmetically by javascript to unclickable it.
I am trying to animate a menu item.
On move over it expands left, and on mouse out it contracts back.
This works fine.
I am also trying to add a class on click to give the button a specific color but it doesn't seem to work.
Here is a fiddle http://jsfiddle.net/g3ra912j/
css:
#menu1 .active {
background-color: #00f;
}
script:
$("#menu1").click(function () {
$(this).toggleClass("active")
})
onclick it supposed to turn blue, but it doesn't.
What am I doing wrong?
Thanks
You have an extra space in your CSS. Should be
#menu1.active {
background-color: #00f;
}
since you are adding the class .active to the same element as has the id menu1. The original CSS would target an element with class .active inside #menu1.
i had to deal with the same problem. use addClass('active') instead toggleClass. just have an if condition to check if the element already has active class before adding active class
let me know if it works.
and about the css bobdye was right
This may not be possible, but I'd like to confirm.
You can globally change the selected text highlight color of the page with
::selection {
background: #cccccc;
}
::-moz-selection {
background: #cccccc;
}
but is it possible to change the the highlighted color for an individual element in JavaScript?
For example, if s is an element's style attribute, you can change the text and background colors using
s.color = s.backgroundColor = "#cccccc";
is there a style to change the element's highlight color?
This must be in old-fashioned JavaScript, no JQuery.
EDIT:
Also, because of performance, I need to change this to the element itself. CSS class swapping performs very poorly. The use case is that every word in a page I do not own will become it's own element. On an average page, adding a CSS class through script is taking 20-30 seconds whereas changing inline styles can be done in under 1.
Pseudo-elements and pseudo-classes aren't in the DOM, but you can use classes to achieve your result.
So add a rule like
.selectionclass::-moz-selection {
background: #cccccc;
}
to your stylesheet and add the class name selectionclass to your element.
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/