I have a form with two fields, when the email field gets auto-filled, Chrome mysteriously adds this styling:
input:-internal-autofill-selected {
appearance: menulist-button;
background-image: none !important;
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
color: fieldtext !important;
}
How to disable it by using tailwindcss?
Desired outcome would be that input keeps background-color of inherit.
Related
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 am customizing the login theme in keycloak. I am trying to change the color of the login button, but it does not reflect the color.
I tried the following in my css file.
#kc-login {
background-color: rgb(2, 202, 102) !important;
}
But, it shows the new color only on hover.
It is a bootstrap primary button which is blue in color by default. I am not good in css. Anyone please suggest.
try this
background: none;
background-color: rgb(2, 202, 102) !important;
Try This
To change the login button color
input[type=submit] {
background-color: rgb(2, 202, 102) !important;
}
Where is the border color defined in onsen-ui version 2 css?
I'm talking about the widget defined under the "Segment" section in the documentation.
Simple you can add this code in css file:
.ons-css .button-bar__button {
color: rgba(224, 18, 18, 0.77) !important;
border: 1px solid rgb(224, 85, 18) !important;
}
Somewhere within my application i have
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
background-color: #f9f9f9;
}
By using Server-Side code (at the ItemDataBound event of a repeater control) i apply the following CSS classes to specific rows like so
<tr id="MyRow" class="fc pwon">
Which are...
.fc {
background-color: #fcfcfc;
}
.pwon {
background-color: rgba(77, 144, 254, 0.47) !important;
color: black;
text-align: center;
}
Unfortunately the color that is applied at the row is #f9f9f9;
Why is this happening? How can i fix that?
Your .fc and .pwon classes are on a tr element, but in your first rule you're applying that background to either td or th. The background of a table cell is always painted over the background of a table row so you won't see your row background.
You need to replace your selectors with the following:
.fc>td, .fc>th {
background-color: #fcfcfc;
}
.pwon>td, .pwon>th {
background-color: rgba(77, 144, 254, 0.47) !important;
color: black;
text-align: center;
}
It's not clear to me why you have only one !important there, but either both of them need to be there, or it doesn't need to be there at all. Remove the !important first (because !important is usually bad practice if you don't know what you're doing), and if you're not seeing the background, try matching the specificity of your first rule by copying the selector and then adding .fc or .pw to the tr part. This may or may not work depending on the HTML that's being generated; you'll have to tinker with it a little.
In your code you are applying pwon to tr while the .table-striped tbody>tr:nth-child(odd)>td is applying style to the td.
try this:
.pwon td, .pwon td {
background-color: rgba(77, 144, 254, 0.47) !important;
}
The code that is setting the background is scoring higher on specificity.
Basically, although you're referred directly to the class applied to the item, the first piece of code is referring to the table, table body, row, and index of the row specifically, so it scores higher.
It's not ideal, but if you added the other code to the beginning of your selectors like this:
.table-striped tbody>tr.fc:nth-child(odd)>td, .table-striped tbody>trfc:nth-child(odd)>th
{
background-color: #fcfcfc;
}
.table-striped tbody>tr.fc:nth-child(odd)>td, .table-striped tbody>trfc:nth-child(odd)>th
{
background-color: rgba(77, 144, 254, 0.47) !important;
color: black;
text-align: center;
}
That would fix it for you. But it's quite messy, and you could look at reducing specificity of the other selector instead, or using an important! declartaion (urgh) ;)
When i put a widget on a form in Qt Designer and change its style, i can omit {} parenthesis.
Is there a way to change a style for hover state without {}?
QWidget {
background-color: rgba(32, 255, 8, 95);
margin-bottom: 3px;
}
QWidget:hover{
background-color: rgba(32, 8, 255, 95);
}
This works, but i don't like duplication, and that all child widgets of the same class will inherit the style.