I have tried to change the placeholder color of the input element when you hover it.
add :hover then ::placeholder pseudoelement to change its color:
input:hover::placeholder {
color: red;
}
Related
Update: here is the full code: codepen
I have below HTML: here is the full code
<input id="id1" value="planner" type="checkbox" />
<label for="id1">Name</label>
Before the label I want to insert an icon so I have the below the CSS file.
input[type=checkbox] + label:before {
#include custom_square;
content:'';
display: inline-block;
}
my custom icon mixin is as below:
#mixin custom_square {
width: 10px;
height: 10px;
border-radius:20%;
border:1px solid #0069aa;
margin-right:0.3rem;
&:focus::after {
border:1px solid #ffffff;
}
}
now when user focus the lable it does color change the css for it as below:
input[type=checkbox]:focus + label,
input[type=radio]:focus + label {color: #fff;}
Also, I want to change the border color of the square to white on the focus of it, I have added &:focus::after pseudo element in the mixin custom_square but it seems it is not working, any clue?
P.S: I don't want to use font-awesome icons, instead I will be creating my own icons and would be inserting that as shown above:
I am trying to change placeholder text color of vuetify select box. My attempt is as below.
<v-select
:items="items"
placeholder="place"
dense>
</v-select>
.v-text-field--placeholder {
color: green !important;
}
But it will not change the placeholder text color. Where I was get wrong and how can I fix it?
You need to use the ::placeholder selector:
.v-text-field input::placeholder {
color: green;
}
I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?
You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}
One might work (but not a good practice at all):
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead
The appearance (background color) of my Floating Pane's title bar and its main pane are the same. How can I make the background color of the title bar different?
<div id="fltQury" class="roundedCorners" data-dojo-type="dojox.layout.FloatingPane"
title="A Floating Pane" dockable="false" closable="true"
style="width: 350px; height: 100px; top: 100px; left: 120px; " >
<div>
Thanks,
Gido
You can simply use CSS to do that, for example:
#fltQury .dojoxFloatingPaneTitle {
background-color: yellow;
}
This should be working fine, as you can see in this fiddle: http://jsfiddle.net/nqP6B/
Overriding the CSS may change all the styles pertaining to dojoxFlotingPaneTitle. Rather, I would suggest to use the following dojo.style to change the color.
var resultDiv = dojo.byId('fltQury');
dojo.style(resultDiv, {
"backgroundColor": "#a4e672",
"color": "black"
});
for more information, please go through the this link.
I cannot fig. out how to style the text inside of a dijit.form.FilteringSelect dropdown box. Default, the text is black and the background is also, so you can only see the text when you hover (white hover box).
I'd like to change text to white, then onhover black.
here's my html
<select dojoType="dijit.form.FilteringSelect" id="mapLayout" name="mapLayout">
<option value="Landscape8x11" selected="selected">8 1/2 x 11 Landscape</option>
<option value="Portrait8x11">8 1/2 x 11 Portrait</option>
</select>
here's my css (doesn't work)
#mapLayout{
color: #ffffff;
};
another try (doesn't work)
.claro .dijitTooltipContainer .dijitInputInner{
color: #ffffff !important;
};
Try this
.dijitComboBoxMenu .dijitMenuItem {
color: #FFFFFF;
}
.dijitComboBoxMenu .dijitMenuItemHover {
color: #000000;
}