I am using react-bootstrap, specifically Tabs and Tab. Tab has a built-in attribute tabClassName that takes a string. The instructions for usage are "tabClassName is used as className for the associated NavItem".
So I set <Tab tabClassName="main-tab">.
My goal is to remove the blue outline that appears when the tab is focused on. However, the following CSS does nothing.
.main-tab, .main-tab:active, .main-tab:focus {
outline: none !important;
}
Here is the site inspection:
How do I get rid of the blue focus outline?
I found the solution:
the following CSS works:
.main-tab > a,
.main-tab > a:focus {
outline: none;
}
Related
I would change the color of the menu items in wordpress. In this site https://www.modacapellishop.it/ I have four voices in the menu (Brand, Prodotti, Modacapelli Choice, Outlet) and I need to change the color of Modacapelli Choice (grey to blue). I added this code on the CSS file:
/* Change color menu Modacapelli Choice */
#menu-item-427 a {
color: #2976ce;
}
It work but just on desktop. On the mobile version in menu navigation sidebar the menu item "Modacapelli Choice" doesn't change the color.
How can I solve that?
Since this is an extremely specific case you can either .menu-item-427 > a { color: red!important; } or do .nav>li.menu-item-427>a { color: red; }
I would recommend the latter.
However both are not great, since it is bound to the ID. I would recommend making an ACF field for the page or the menu-element, then checking if it exists, and creating an inline style or adding a class if it is true.
The user can then also change the color of other elements he wishes to change without contacting you about it.
You would then add a class like this to your menu markup for example.
.is-highlighted-element {
color: red;
}
In Mobile view doesn't have #menu-item-427 this id. so replace with .menu-item-427
Try this css it's works
.menu-item-427 a {
color: #2976ce;
}
Vaadin text field has a default underline. I want to remove it.
I am using it inside of a Vaadin combo box.
In dev tools I can see that a div with the attribute part="input-field" is the cause.
Setting it to display: none; works in the browser.
I can't seem to target it with code. I've tried the following:
`[part="input-field"] {
display: none !important;
}
.vaadin-text-field-container [part="input-field"] {
display: none !important;
}`
Add Viritin add-on (use latest version) to your project, and configure:
TextField field = new MTextField().withSpellCheckOff();
OR
you can use the low level API to configure the html element:
new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
"spellcheck", false);
I solved it by adding this module to the HTML file.
I placed this above the first script tag in the file.
<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
<style>
div::before, div::after {
display: none;
}
</style>
</template>
:before is the underline before the input has a value and :after is the line after.
Therefore this would disable both.
[part="input-field"] disabled the input and the value was not seen after selection.
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
Here is my website. Is it possible to change the title background color using custom css code? Currently it is red. I would like to change the color to light blue for all the titles like, "TRENDING POSTS", "SEARCH ENGINE OPTIMIZATION", "SOCIAL MEDIA", "RECENT POSTS" "POPULAR", etc
As you're using a theme, I'd be very surprised if you had to write any custom CSS rules to change this. There's probably a setting in Appearance > Customise. If not, check the documentation. It might be hidden somewhere else.
If there isn't, open the CSS file associated with the theme (which looks like it's at /wp-content/themes/awaken/style.css) and search for any instance of #fa5742. Copy the selector (the bit before the first brace { ) and add it to your custom CSS rules. For each selector add:
the-selector-goes-here {
background-color: #your-blue-colour;
}
You can change background color by doing changes in these classes
.awt-title
{
background: #0056ca;
}
.main-widget-area .widget-title
{
background: #0056ca;
}
#awt-widget > li.active > a, .nav-tabs > li.active > a:hover, #awt-widget > li.active > a:focus
{
background: #0056ca;
}
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.