I've referred to How do you style the dropdown on Google Places Autocomplete API?, and could't find the answer to my problem. I changed the .pac-item class on hover, focus and active but didn't work. Before I upload the pictures, let me tell you the problem. There's a dropdown, which is a google autofill feature. I want the background color of the list items to be #0085c6 (class - blue) when I go over an option. Now, this works fine when I hover on it (as seen on the pic), however, when I use the arrow keys to traverse through the list the background color becomes #ff5a5f (class - red).
Please, help! Thanks.
Works fine on hover, i.e.,
.pac-item:hover{
color: white !important;
background-color: #0085c6 !important;
}
But, when arrow keys are used:
Related
I have a calendar on my site where the user can select a time range. I'm using the react-advanced-datetimerange-picker library for this, but I'm changing the library's default styles and ran into a problem.
I would like to change the background color in the box that I marked with a red arrow in the photo below. I also took a screenshot of the developer panel so you can see the styles and markup.
It seems like an easy task, but I've tried many options with no success.
What do I need to write in my .css file so that I can change the background color?
https://codesandbox.io/s/hopeful-khorana-gbjuiz
Simply change the background from #FFFFFF to any color you want!
There are many methods to achieve that
As seen in the screenshot
The input has a class inputDate
First Method
**
Assuming u want to set the background color to orange.
.inputDate{
background: Orange;
}
Another method:
You can use inline styling by adding style="background: orange" to the input
<input style="background: orange" class="inputDate"..... />
I'm currently working on a Responsive E-Commerce Product Slider Using HTML CSS & JavaScript.
Which inlcudes jQuery Core 3.6.0 from https://code.jquery.com/ and light slider from http://sachinchoolur.github.io/lightslider/
I've managed to get it working, however there is this random background color always allpied to the most left slide.
At first i thought that i ay have accidentlly applied background color to it. But then i realized if one of the slide has a background color all of them shoud've. and it's always on the most left one.
I've checked the color code using paint (which is rgb(231,155,155) it's also not in any of my colors in the rest of the html.
I've try to search the files using keyword("color") where it could've caused this. But i just can't seems to find it.
I've also checked my own scss file for any possible reason but both the slideshow container and the slide
doesn't even have a back ground property set to them.
Much Appreciate to anyone who can provide assistant.
So i find the problem and i'm posting it here if anyone ran into the same problem.
So currently i have two slide show in my html and one of them has a groups of dot on the bottom of the slide show displaying which image is it displaying out of all.
By doing that it is set to 'active' and in the other slide(the one above) the most left slide is also set to 'active' by sachinchoolur (http://sachinchoolur.github.io/lightslider/).
so all i did was change one of the 'active' to 'activedot'
.active,.dot:hover {
background-color: rgb(238, 160, 160);
}
to
.activedot,.dot:hover {
background-color: rgb(238, 160, 160);
}
and in the corospoinding javascript file change the 'active' to 'activedot'
I'd like to use the same cursor icons used in HTML Drag and Drop API (DataTransfer.dropEffect property copy and none), however, currently i'm using the jquery draggable/droppable api. Is it possible to set the cursor to these values without having to change the api i use?
Neither of the cursor icons appear to be specified anywhere in the docs https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Here is an example of what I'd like the cursor behavior to be: https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html
Welcome to the community!
Get the html element of the drag and drop component and style that component using CSS.
div[draggable] {
background-color: pointer;
}
This problem could not be only for the WordPress cms, but also any other page.
I need assistance using the WordPress storefront theme/woocommerce via styling specific page children.
There are three categories in the navigation tab for someone to hover over where a dropdown list will occur for each tab with different pages/items related to the category being hovered over.
All the pages within each tab/category on the nav bar should have a different background.
Example: If I hover over a nav tab "shoes" a drop down list will show different several shoe brand: Nike, Adidas, Sketchers. All the pages that are on the Shoe tab should have the same background color of red.
Another nav tab might be Hats whereon after hovering a drop-down list of several hat brands show. All the pages in that hat tab should have the same background color of blue because it is of the hat tab.
I do not see any html tags in the DOM with specific classes to put css so all page elements will get the same effect.
Example:
.container .hats {
background: blue;
}
There are no elements where I can apply the styles to. if I just used .container, then all pages will get the same color.
Any help?
EDIT
My bad, I was not specific in my question.. It is not changing the nav background colors ex: but when the user clicks on a specific brand "nike" under the main tab "shoes", the page that that gets loaded into the browser will display products of nike in a red background.
I found another post which helped in changing the specific CSS.
Change CSS when the current URL contains a certain string
Using JavaScript, you are able to search for specific parts of the url.
If the URL contains the term or index you want, you can make changes the elements on the documents.
<script type="text/javascript">
$(document).ready(function () {
if (window.location.href.indexOf("hats") > -1) {
$(".site-content").css("background-color", "red");
} if (window.location.href.indexOf("shoes") > -1) {
$(".site-content").css("background-color", "green");
}});
</script>
The downside I noticed was that the page does not update the specified css immediately but a small delay is seen between the background color change.
Alternatively, you can use plain css targeting the product class in the body for each item. It will be tedious if you had a lot of pages, but the provides no delay in changing the background colors from default to the set value.
I'm realy new to css and jquery and I need help for my project.
I have 3 buttons: disadvantage - average - advantage and I need to make this buttons to work like radio buttons so if I click on disadvantage this button change background color and other butons lose colors if was clicked on him. and disadvantage button get red backrground color.
If I click on average button, this button must get yellow color and other lose color if was clicked on him before
-If I click on average button this button must get green background color and other buttons to lose color. so like radio buttons
BUt I try to do that based on #ID's
$('#price_quality_adv').css('background-color','#C90');
$('#reliability_adv').css('background-color','#C90');
http://jsfiddle.net/EC44Z/5/
please help. sorry for my english
THANKS!
Seems to be a scope issue of some kind, not sure if it is exclusive to jsFiddle environment. When I make this change, it is fixed (for the advantage button at least)
setQuality = function(qulaity, type_rating, name)
Fiddle: http://jsfiddle.net/EC44Z/8/
There are still some other issues however, the code is a little complex. It is better to do something like...
HTML
advantage
CSS
.button{ /* styles for all buttons */ }
.selected{ /* styles for selected button */ }
JS (jQuery)
$("#button_advantage").on('click',function(){
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
})
Summary
The code should be separated, so it is easier to maintain, works well in various environments, and gets good search ranking etc...
HTML is for content, and should be marked up as such, with appropriate classes to group similar items, and unique id for relevant elements.
CSS is for style, and all styles should be kept together there where possible.
JS is for dynamic functionality, so in this case, adding a class, so that the style changes.