I have a v-select widget (combobox / select) in a Vue application. When I open it and hover over an option, the background-color of the option is highlighted (currently light-grey). I want the background-color to have a different color when the mouse arrow hovers over an option. I can not see a property of the v-select widget that supports this. Is there a way to achieve this?
v-select::hover {
background-color: "#00857A";
}
<v-select
append-icon="../assets/img/sy-arrow-chevron-down.svg"
background-color="white"
:height="68"
item-text="label"
item-value="key"
class="mr-3"
v-model="type"
:width="421"
:items="searchCriteria"
#change="performSearch()"
></v-select>
Define color:
.v-list-item--link::before { background-color: red; }
Define opacity:
.theme--light.v-list-item:hover::before { opacity: 0.64; }
Add item-color attribute to v-select
I guess this is the official way to modify Vuetify: https://next.vuetifyjs.com/en/customization/theme
Add a style for listitem on hover:
div.v-select-list div[role=list] div[role=listitem]:hover {
background-color:#00857A;
}
and the background of the selected option will be colored darkgreen
Maybe this can help you, it worked for me
.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
background:#9d2449 !important;
color: white !important;
}
.theme--light.v-label {
color: rgb(252, 252, 252);
}
.theme--light.v-select .v-select__selection--comma {
color: rgba(255, 255, 255, 0.87);
}
Use :
::v-deep to access the css.
::v-deep .v-list-item--link::before { background-color: red; }
::v-deep .theme--light.v-list-item:hover::before { opacity: 0.64; }
Just add bg-color prop to your v-select.
<v-select
name="foo"
label="foo"
:items="['foo', 'bar']"
bg-color="red"
/>
Related
I'm starting to work with styled-components and had a question about scoping.
This is just a dummy example but one that shows the point.
So I have a component. I setup a styled div called Wrapper then instead of creating another styled component to handle group, I thought be easier to just add a class to the inner div called .group and using nesting like in SCSS to style the inner div. This works but the problem with using className for the inner div is there could be a collision with global styles called .group
So, is there a way to avoid this with scoping somehow, or would I have to create another styled component called Group to handle that inner CSS ? Seems like a lot of boilerplate to have to add another styled component just to style the inner components.
const Wrapper = styled.div`
color: blue;
.group {
padding: 10px;
color: green;
}
`
const MyComponent = () => {
return (
<Wrapper>
<div className='group'>
<h1>heading text</h1>
<h2>subheading text</h2>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
Here is my globalStylesheet with group. Obviously this only has one style but it could have way more to handle grouped elements globally.
export default createGlobalStyle`
h1, h2, h3, h4, h5, h6 {
font-family: '.....';
}
.group {
background-color: red;
}
`;
I know I could also do
> div {
border: 1px solid red;
}
but I want to be able to be more explicit with a className
I think it's better to create another styled-component for group like
const Group = styled.div`
padding: 10px;
color: green;
`
So you can be sure that overwriting styles properly. And if there will be more styles in Wrapper, it stays less readable. Also you can easily replace Group component into children or make as parent(in this case you should rewrite .group style from Wrapper to another one).
In future to prevent boilerplate code you can rewrite existed styled-components like
const Timer = styled.div`
background: #ff5f36;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-family: GTWalsheim;
font-size: 32px;
color: #ffffff;
`
const TimeIsUp = styled(Timer)`
width: 172px;
border-radius: 8px;
`
EDIT
Also you can easily replace Group component into children or make as parent
I'll try to explain in code below
const MyComponent = () => {
return (
<Wrapper>
<div className='someClass'>
<Group> // so you can replace only your component, without rewriting any style
<h1>heading text</h1>
<h2>subheading text</h2>
</Group>
</div>
<div>This is my blue text</div>
</Wrapper>
);
}
I mean you can easily replace Group component to any place of code. While when you write style from parent as it was in Wrapper, you should replace this .group style from Wrapper to another element which is parent for .group
I am unsing the application layout in an application where there is no footer. Is there a way to get the lotusColLeft (or/and lotusColRight) to be the same length as the lotusContent div? The users are complaining a bit on the fact that the left menu's background color doesn't go all the way to the bottom of the page.
You can use Firebug or some other CS debugger to see the CSS for the left pane and the content pane and see if you can tweak the CSS (maybe try 100% for the height).
You may end up having to get the height of the content div and then set the left div to the same height in CSJS onClientLoad. You will also have to use the same code in a window resize event in case the user changes the browser window size.
Howard
OK, here is how I finally made this happen: I used a background image. Not ideal, I agree, but less problemeatic than the original solution (at the bottom of this answer):
.lotusContent {
background: url(leftColBkgd.png) repeat-y;
}
.lotusColLeft {
background-color: grey;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
Original solution:
.lotusColLeft {
background-color: grey;
min-height:2048px;
position: absolute;
z-index: 10;
}
.lotusMain .lotusContent {
padding-left: 230px;
}
I have this in my css:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error?
Edit (another case):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1]
Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. Use a common class for e.g. sprites. (d
uplicate-background-images)
One of your rules here seems totally redundant. The rule under max-width: 970px is already true when under max-width: 1200px.
To recap, change it to:
#media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
#media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. Because you have different images, you can't combine the two rules there.
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. This would only work in some cases, and it's a bit of a mess, depending on the layout. I made kind of a lazy example, just so you understand what I mean. You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
Option two: easier but less semantic. Instead of using multiple backgrounds, use multiple elements. jsfiddle and example:
html:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. It's there to help you, not make you jump through hoops. Your code will work great either way.
Hope it helped.
How can I get an image button with hover effect? I have two button images one is simple and the other one is for the hover?
You can easily do it in CSS.
input[type='button']:hover
{
color: #00a;
//or background-image: url("url");
}
You can do it easily with css by using a sprite image and moving the background image depending if its hovered or not.
css:
a { display:block; width: 80px; height: 40px; background: url(bgImage.png) top;
a:hover { background: url(bgImage.png) bottom; }
You have to combine your "simple" and "hover" image into a single image for this to work.
How can I change the default graphic for the Infowindow close button?
You can do it with CSS, like this:
img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]
{ content:url("/img/own_close_button.png"); }
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Most mobile devices (default browser)
Does not work on:
FireFox 27.0
IE 11.0
If you're using google maps API V3, then you might want to use the official add on infobox.
Google Maps Utility - Infobox
First you need to hide the default close icon:
.gm-style-iw button.gm-ui-hover-effect img {
display: none !important;
}
Second, force the default button (that holds the image) to have full opacity:
.gm-style-iw button.gm-ui-hover-effect {
opacity: 1 !important;
}
Third, set your own image and position it:
.gm-style-iw button.gm-ui-hover-effect:before {
display: block;
content: "";
background: url('assets/close-red.svg') center center no-repeat;
background-size: cover;
width: 8px;
height: 8px;
right: -19px;
position: relative;
}
Result:
With jQuery you can change the image file location. If I have an image button_close.png that is 16px in size:
jQuery('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').livequery(function() {
jQuery(this).attr('width', 16).attr('height', 16).css({
width: '16px',
height: '16px'
}).attr('src', 'button_close.png');
});
Of course this only works as long as Google uses this file location.
button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}
button.gm-ui-hover-effect img {
display: none !important;
}
Using what Dimitrije Djekanovic and Grant suggested, here is a working version for the current API version 3.49 (Mid-May of 2022):
/* hides the x image */
button.gm-ui-hover-effect > span {
display: none !important;
}
/* inserts the customized and clickable image instead */
button.gm-ui-hover-effect {
opacity: 1 !important;
background: url('close.svg') center center !important;
background-repeat: no-repeat !important;
background-size: 16px 16px !important;
/* above is a good size or uncomment the next line */
/* background-size: contain !important; */
}
To test this, go to the StackBlitz demo provided by the official documentation and paste the style.css file while having background changed to:
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
center center !important;
There isn't really a way to do this. Your best bet would probably be to use a third-party or custom Infowindow.
There's a list of some third-party solutions here.
To replace with (or whatever image you might like), after
infowindow.open(map, marker);
you can try to add these lines
$('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').each(function() {
$(this).attr('width', 14);
$(this).attr('height', 13);
$(this).css({width: '14px',height: '13px'});
$(this).attr('src','http://www.google.com/intl/en_us/mapfiles/close.gif');
});