I have a jQuery UI Button that I am trying to style using CSS. Basically all I want is a dark-green background, and a light-green hover color. I noticed that for whatever reason, specifying the desired styles in my CSS file didn't work, so I added some code to apply them programmatically when the button is created:
//initialize the jQuery button with the correct styles
$( "button", ".buttonContainer" ).button();
//add a class that we can apply our styles to (jQuery likes to override styles applied to .ui-button)
$(".buttonContainer .ui-button").addClass("greenButton");
//override button styles (doesn't work when done through stylesheet)
$(".greenButton").css("background", "none !important");
$(".greenButton").css("background-color", "#006600 !important");
$(".greenButton").css("border", "1px solid darkGray !important");
//mouseover handler to change the background color (same reason as above)
$(".greenButton").hover(function() {
//mouse-over handler
$(this).css("background-color", "green !important");
}, function() {
//mouse-out handler
$(this).css("background-color", "#006600 !important");
});
This works fine in Chrome, IE, and Safari, but for some reason Firefox continues showing the default gray button styles (no scripting errors are reported). Interestingly, if I open the web-developer CSS editor, the button gets the correct styles instantly. I have the following in my CSS from back before I realized that the styles would only take if applied programmatically:
.greenButton {
background-color: #006600 ! important;
}
.greenButton:hover {
background-color: green ! important;
}
Anyways, what I see in Firefox by default looks like this:
...when it should look like this (as seen in any other browser):
Any ideas?
In your CSS you are only setting the background-color attribute, while jQuery UI buttons are built with background image, which covers the color. You were correct to set 'background:none' via JS, but adding it to the element's style multiple times via css() messes things up a bit - just inspect the style attribute of your button when active in, e.g. FireBug. It might well be that you hit a minor bug in FireFox. It works for me. In any case, here is working jsFiddle
CSS:
.greenButton {
background: #006600 none ! important;
}
.greenButtonHover {
background: #009900 none ! important;
}
HTML:
<button>Should be green on hover</button>
JS:
$("button").button();
$("button").addClass("greenButton");
$(".greenButton").hover(function() {
$(this).addClass('greenButtonHover');
}, function() {
$(this).removeClass('greenButtonHover');
});
Related
I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}
I'm having a similar problem as described in this question, but with JQuery Mobile 1.4, particularly with the list views. A slight tap that is not enough to be considered a click causes list elements to highlight and stay highlighted:
Can anyone tell me how I can prevent any hover highlighting in my application? I would rather not have to modify any of the JQM theming CSS to do this, but I will if that is what it takes.
It looks like maybe there is a jquery hover event or mouseover being triggered to set the interaction state to something like ".ui-state-hover" or ".state-hover"
1.
jQueryUI - removing class on hover
2.
function overPrevent(e){
e.preventDefault();
return false;
}
$(".options li").hover(overPrevent,outOption);
// alternative to above but still using JavaScript
$(".options li").click(function() {
$(this).removeClass("ui-state-focus ui-state-hover");
}
// alternative to above but still using JavaScript
$(".options li").hover(function(e){
$(this).removeClass("ui-state-hover");
});
OR maybe unbind to the mouseenter and mouseleave?
3.
$('.options li').click(function(){
$(this).unbind("mouseenter mouseleave");
})
OR try a pure css override
4.
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
also detecting mobile up front with something like this small library - http://detectmobilebrowsers.com/
then you can name space your css and override the jquery ui library with something roughly like this:
.touch{
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
}
see also references:
http://trentwalton.com/2010/07/05/non-hover/
jQueryUI - removing class on hover
http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
The issue with the "ui-state-hover" effect
Jquery hover function and click through on tablet
jQuery UI button not "unclicking"
http://api.jqueryui.com/theming/css-framework/
mobile safari links retains focus after touch
http://detectmobilebrowsers.com/
https://github.com/kof/remove-hover
To prevent any hover highlighting in a jQuery Mobile 1.4 Listview you can overwrite the appropriate CSS according to the swatch you're using:
/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}
I'm trying to use YUI StyleSheet to change some content of the style tag but it doesn't change. Visually, everything works but when I inspect the code in chrome Dev Tools there are no changes. Am I doing something wrong?
My code:
Style
<style id="myStyle">
h1
{
background-color: red;
}
</style>
JavaScript with YUI
YUI().use('node','stylesheet', function (Y)
{
var sheet = Y.StyleSheet(Y.one("#myStyle"));
sheet.set(
"h1",
{
backgroundColor: "#aabbcc",
paddingLeft: "100px",
paddingTop: "100px"
});
});
After YUI does its magic, content of the tag remains the same. I even don't know where all the style goes.
It is ok. YUI StyleSheet works with styleSheets objects but not with the inner text of style DOM element. So visually everything works, but Dev Tools doesn't show the changes. Check the styles of your h1 element - you should see, that your changes is applied.
How can I prevent browsers from customizing buttons, such as Chrome, for example, does.
I would like to remove that "No f... sen". What is the best way to do that?
The only way you can remove the text part in non-IE10+ browsers to make it transparent:
input[type=file] { color: transparent; }
However, I’d not recommend that, as you will also not be able to see the text when a file has been selected either.
For IE10, you can style it with:
input[type=file]::-ms-value { /* styles here */ }
In WebKit you can style the button itself with:
input[type=file]::-webkit-file-upload-button { /* styles here */ }
While in IE10 you can do the same with:
input[type=file]::-ms-browse { /* styles here */ }
Try to google for "Css style file input" ;)
This will lead to: http://www.quirksmode.org/dom/inputfile.html
Styling of <input type="file" /> is really tricky.