I have seen multiple answers however I have not managed to solve my problem with them so far.
I have a some text fields that are like this:
.form-wrapper .field-list .field .field-element{
background-color: rgba(0,0,0,0.5);
color: rgba(255,255,255,255);
}
So here, it will get the existing boxes (text fields) and it changes the background to a semi-transparent black and also change the text color to white. However when I click in the text field it goes from being the semi-transparent black to a plain white color. Any help on how to fix/make it the same color as the text field background? - Thanks
NOTE
I have seen some stuff like this:
#inputId:-webkit-autofill {
background-color: white !important;
}
But this has not worked for me.
Use the :focus pseudo element.
.form-wrapper .field-list .field .field-element:focus {
color: #fff;
background-color: rgba(0,0,0,0.5);
}
You could even style the focused form and the non-focused form at the same time:
.form-wrapper .field-list .field .field-element,
.form-wrapper .field-list .field .field-element:focus,
{
background-color: rgba(0,0,0,0.5);
color: rgba(255,255,255,255);
}
I would suggest that you create some kind of style difference for the focused input form. This is for accessibility/usability reasons.
Related
Hello I am trying to remove the default background of toolbar icons when hover in firefox using userChrome.css
.toolbarbutton-icon
{
border-radius: 5px !important;
box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
background-color: var(--uc-regular-colour) !important;
width: 26px !important;
height: 26px !important;
padding: 5px !important;
}
This block of code changes the size and color of all toolbar buttons including extension icons
Then I used this block of code to change its color when hover over them
*:hover > .toolbarbutton-icon{
background-color: green !important;
}
Which changes color of buttons when hover but the extension buttons stays the same.
How can I change it without having to define each extension name or property
Below are some screenshots to demonstrate the issue
As you can see except extension button all buttons change color
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Tried this block as well as suggested below, but it hovers on all icons by default, I want each button to change color when hovered over them also when I hover over the extension button It still has the gray color
It will be a problem when you use >.
The > notation applies only to the immediate children of that element.
Try use:
*:hover .toolbarbutton-icon {
background-color: green !important;
}
Hope this helps.
.webextension-browser-action:hover > .toolbarbutton-badge-stack .toolbarbutton-icon { background-color: var(--uc-hover-colour) !important;}
Apparently after doing some research. Finally found a way to fix it.
The block of codes only works with extensions installed on firefox
I have a use-case where I have a small box where I am showing a dropdown. Now in this dropdown, while going through different options, a "Press enter to select" green box appears, but this hides the content behind.
How can I make it so that content behind is visible? Attaching a screenshot for reference.
I have been able to find the CSS class for this which is:
multiselect__option multiselect__option--highlight
And these are it's CSS properties. Can I modify these somehow to make it transperant? I tried changing color from green to light yellow/pale but that didn't work.
.multiselect__option--highlight {
background: #41b883;
outline: none;
color: #fff;
}
Update: After following answer below, this is how it looks like,
You can make the background with opacity like this:
.multiselect__option--highlight {
background: rgba(65, 184, 132, .3);
outline: none;
color: #fff;
}
and if you want the words "Please enter to select" also with opacity you can do it like this:
.multiselect__option--highlight {
background: #41b883;
outline: none;
color: #fff;
opacity: .3;
}
I have a search box and I want the color of the text in white.
I changed the placeholder color to white and the text color to white, but the text color only turns white when the person clicks out of the form (while typing it remains the grey Bootstrap color).
How can I change it? My style.scss code:
.form-control {
background-color: transparent !important;
color: white;
&::placeholder {
color: white;
opacity: 1;
}
}
For your problem focus pseudo class should work:
#searchFieldText:focus { // set your searchbox with focus pseudo class
color: #fff; // put your color here
}
Let me know if this works.
I think your styles is overrided somewhere. Please look at working example from my fiddle:
https://jsfiddle.net/zmpLru0x/1/
<input class="form-control" placeholder="Example placeholder" type='text'>
.form-control {
background-color: transparent !important;
color: green;
&::placeholder {
color: red;
opacity: 1;
}
}
In above example you can easily control placeholder color using method you provided. When you change color to white also placeholder and text will be white.
I've created (copied and edited from online tool) a little box with a text here on the botton right corner
I would like to change also the color of the text in the box. But there's the command a:link, a:visited.
How could I bypass these commands and giving the color I would like to to the text, maintaining the link?
Thanks
Pseudo-selectors as a:link and a:hover (and many more) change the default behavior of the browser. You may omit them, but I'm pretty sure you don't want to.
a:link sets style of the anchor so it is not the default blue underlined.
a:hover sets style of the anchor when you move your mouse over the link.
Use search engine of your choice to learn more, try 'css pseudo selector'
Read the code, the color settings are all there:
.button {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 12px 24px;
border: 1px solid #28A26B;
border-radius: 8px;
background: transparent
linear-gradient(to bottom, #FFF, #FFF)
repeat scroll 0% 0%;
// this is what you're probably
// looking for - the color of the button body.
// It's set to transparent.
font: bold 20px arial;
color: #28A26B; // Color of the content
text-decoration: none;
}
.button:hover, .button:focus {
// these pseudo classes just make the js events onmouseover
// and onclick obsolete...
color: #28A26B;
text-decoration: none;
}
Set background to the color of your choice, remove the gradient part and you're done. Do NOT copy blindly.
After rule on line 77 of styles.css file put this one:
#call-to-action a:link, #call-to-action a:visited {
color:yellow ;
}
I want to change the color of the text (link) in a box. This is the CSS code I'm using:
.boxed-1 {
background-color: #e8ecf4;
border: 1px solid grey;
padding: 15px;
margin-top: 1px;
margin-bottom: 10px;
margin-right: 25px;
margin-left: 0px;
}
When I call for div class boxed-1, all the text displays blue. How can I change it?
I've tried a bunch of different suggestions from my google search to no avail.
My site is: http://mikediane.com
Links are set to the color blue by the browser, thus they do not inherit from their parent like most other elements do.
You will need to apply a color: #?????? to the a itself, like this:
.boxed-1 a {
color: #??????;
}
See this JSFiddle for a demonstration.
Typically if you want to set the text in an element just apply the CSS style color.
In your case,
.boxed-1 {
color: /*Whatever color you want*/
}
The problem is that your anchor tag's color is being applied to the text. If you create a rule like
.boxed-1 a { color: #hexcode; }
I'd expect this to work.