jQuery autocomplete hover styling - javascript

I'm trying to change the background colour of the autocomplete when an item is being hovered and I just can't get it to work. I managed to change the general background colour with .ui-menu-item a and have tried to use :hover, :focus, :active but none of them do the trick. Can anybody tell me what the right class is to do this?
CSS:
.ui-widget {
font-size: 0.75em;
}
.ui-menu-item a {
background-color: #fff;
}

In my case following code worked for me. Hopefully it helps someone.
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: #6693bc !important;
font-weight: bold !important;
color: #ffffff !important;
}

Hovered autocomplete items get the class ui-state-focus applied, so you can target them via CSS with:
.ui-menu-item a.ui-state-focus {
/* your rules */
}
jsFiddle example
Note that newer versions of jQuery UI might need .ui-menu-item.ui-state-focus instead.

The only way I could get it to work was opening the developer tools in IE and seeing what was being called to change the colors. I found this:
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover
so if I add this to my style sheet I am using to override classes (last style sheet to be loaded):
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover
{
border: 1px solid #000;
background: #000;
}
seems to work well for me. You may need to close and reopen your browser after making the change.
I resorted to this as none of the other suggestions seemed to work for me. Posting this as it may help someone else who runs into the same issue..

Related

How can i change webkit-slider-thumb color using javascript?

I want to change the color of the input range and it works with CSS, But i want to change the color using javascript. Please help to fix this.
Working CSS
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background: goldenrod !important;
}
Javascript code
document.querySelector('.plyr--full-ui input[type=range]').style.setProperty('--plyr-range-thumb-background', 'green')
Any solution appreciated!
You're in the right direction with CSS custom properties (variables). Just change the background to the custom property and set its default color:
input[type='range']::-webkit-slider-thumb {
--plyr-range-thumb-background: goldenrod;
-webkit-appearance: none;
background: var(--plyr-range-thumb-background);
}

I am trying to make the text in a button change color when I hover over in with the mouse using CSS

I have a wordpress website and I have a button in the header menu which is called 'Join as a tradesperson'.
http://prntscr.com/px7mdt
It has a green border and white background and the text is black.
I wanted the background of the button to change to green (color: #25ad00) and the text to change to white (color: #fff) when I hover over it.
I have added the following code to custom css is the dashboard:
body #menu-item-1847 a{
color:#000;
}
#menu-item-1847 a{
font-weight: 700;
border: 2px solid #25ad00;
border-radius: 5px;
padding: 2px 20px
}
#menu-item-1847 a:hover {
color: #fff;
background-color: #25ad00;
}
...but now when I hover over the button the background turns green but the text remains black:
http://prntscr.com/px7o9u
I was jut wandering what is wrong with the code as I thought the
#menu-item-1847 a:hover {
color: #fff;
...would change the color of the text to white when I hover over it?
Thank you
It's all about your DOM's CSS specificity you can make your code working without adding !important.
Just increase the CSS specificity. (share your HTML I will explain you this with CSS specificity)
Please read about CSS specificity. Using !important is not good practice. It is not clean code. Go through these articles.
Don't use !important instead increase CSS specificity
Is Using !important is a right choice?
To overwrite existing CSS, add !important like this:
#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}
You can using !important statement like this.
(If you specified the selector correctly, if not, double check the selector #menu-item-1847)
#menu-item-1847 a:hover {
color: #fff!important;
}
It means, something like:
Use me, if there is nothing important else around!

Applying a new background color to Jquery's slider handles

I am not sure why I am having such troubles with this. I have browsed Jquery's slider css file and found the class name of the handles. .ui-slider-handle and it even says in the API docs that is the name of it Slider API doc link, but whenever I add background or background-color and give it a color, it does nothing. The same thing for trying to get the handles to cover the entire bar.
I created a demo page on a site I have to show what I am trying to do. Demo page
.ui-slider-handle {
height: 100%;
color: #000;
margin: 0;
}
Also if someone doesn't mind. I am trying to make the words "Budget" appear in the red part (the budgeted range), but when I applied this: <div class="ui-slider-range">Budget</div> into my html, the word Budget shows to the far left of the slider. The html is like this:
<div id="slider-range">
<div class="ui-slider-range">Budget</div>
</div>
.ui-slider-range {
background: red;
text-align: center;
}
How can I add the background-color to the slider handles and add the word "budget", so that it is in the middle of the red area?
To change ui-slide-handler color, try:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: yellow !important;
}
This is the rule to be overwritten.
The original rule is the following:
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
It's very easy to see all the rules that apply to any element in the page using browser dev tools element inspector.
Your rule isn't specific enough based on the existing rules that have higher specificity with selectors like:
.ui-widget-content .ui-state-default
/* and */
.ui-slider-horizontal .ui-slider-handle
A simple way to make more specific for one instance would be to use your ID of main widget in selector
#slider-range .ui-slider-handle
Or for more broad reaching use.... copy the most specific selector and use that. Last rule in page with same selector takes precedence

Changing default look of materialize scrollspy function

I am using materializecss framework for my website. I am using a scrollspy function for the navigation bar. But I want to change the default color of red to white and change from vertical line to a horizontal line underneath nav links.
Now I have this
What I want is
JS code for scrollspy function.
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I don't know which specific classes to change.
If you don't want to use a side table of contents on your website, you can change the css for the table-of-contents class.
Go to the materialize.css file, and find the following code:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-left: 2px solid #ea4a4f;
}
Then you can replace it with this:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-bottom: 2px solid white;
}
To see the results, you have to link the materialize.css file instead of materialize.min.css in your html. In a production environment, you will need to minimize the modified materialize.css file.
Maybe it's a little late, but I hope it will help.
of-content class, you can add css like this
nav ul li a.active {
border-bottom: 1px solid #333;
}
means, when element a is active, it will give border-bottom

Can't find the CSS element that disturb my layout

I was working on the customization of the template of my web and suddenly, the main menu for some specific pages get disturbed (the frontpage and some other pages are OK).
One of my changes disturbed the rest and I can't find the element that causes the problem.
I am searching for more than one hour already (via Firebug and the coding tool in Chrome "F12") and can't see it.
The first item in the menu had a different color and the border-bottom of the "li" elements of the submenu is bigger than it should be (has to be 1px).
I don't want to spam but I think it will be easier if I put the links:
frontpage: http://imagingshop.dreamhosters.com/ (menu = OK)
one of the problematic pages: http://imagingshop.dreamhosters.com/sharpzoom
--> you will immediately see the difference
the Contact, Services and Tutorials pages are ok, the problem is only at the Product pages.
Thanks a lot for your help.
This css
#main-menu .menu a.active-trail
{
color: #FFFFFF !important;
}
gives the white color to your product.
Change it like
#main-menu .menu a.active-trail
{
color: #AAAAAA!important;
}
Remove the class active-trail it makes your "products" text white.
You have a problem in file http://imagingshop.dreamhosters.com/sites/default/files/css/css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css:
main-menu .menu a.active-trail {
color: #FFF !important; <--- remove this line
#main-menu .menu a.active-trail {
color: #FFF;
}
Just remove !important from color attribute
css_qLs_s8izWGQLERkNiGEldBLDTETyDfKs-iFsVg6MKfE.css
#main-menu .menu a.active-trail {
color: #FFF;
background: #C00;
}

Categories