I'm doing some shapes in react with CSS, in particular, a ring with a big border and I found a annoying issue in it: a default borderline the circle I made. I tried with "outline: none" or "border: none", but I need a border. I don't know if is a browser issue o what.
This is my React component:
export default function Ring(props) {
return <div className={`ring ${props.size} ${props.color}`}></div>;
}
And here my styles for it:
.ring {
border-radius: 50%;
z-index: -1;
&.medium {
height: 500px;
width: 500px;
border-width: 80px;
}
&.main {
border-color: $main-color;
}
&.gray {
border-color: $soft-gray;
}
}
How can I remove this?
The border you are seeing is driven by the default focus that is being highlighted by the browser by the outline styling.
You can add a CSS rule of outline:none; to remove this focus behavior, your border will still maintain but you wouldn't have the blue outline and the element would no longer trap focus with the blue border.
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 created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?
Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.
I need to change a button on my website's homepage from a curved edge to sharp.
It is a WordPress website and I am trying to add this code via Additional CSS window.
I tried to perform the below code, but it did not work.
wobble-horizontal.shop-button.arrow-right.style2.black.bg-white
{
border:3px solid #bada55;
}
Any suggestion on how to make the button sharp-edged?
Edit: I have just realised I haven't mentioned "a" class at the beginning. It should be a.wobble. Sorry for the confusion.
Assuming that's just a div, it's as simple as setting the border-radius to 0px
Also, the library you're using could be high up in specificity, so you can also try border-radius: 0px !important; to try and force it.
Based on your border: 3px solid #bada55 line, I think you may have the wrong selector as that should be setting the border of that button a lime green and not gray.
#sharp {
border-radius: 0px;
}
#not-sharp {
border-radius: 10px;
}
div { background: red; margin: 10px; }
<div id="sharp">My Sharp Button</div>
<div id="not-sharp">My Not Sharp Button</div>
There seems to be another CSS script that is manipulating the border-radius property.
To have sharp borders, use:
border-radius: 0;
The code you were using just sets the border's thickness (3px), style (solid fill), and color(#bada55), not the radius.
If this does not do it, try tracing down what other CSS script is manipulating the border radius, or just use the !important directive to override:
border-radius: 0 !important;
border-radius: 0;
or border-radius: 0 !important; if your CSS is being overridden.
Setting border-radius to 0px should give you straight edges on the button
I'm trying to take away a white border that is appearing from behind an image on my sidebar. I can't figure out what is causing the white border. I thought it was the padding, and then I thought it was the border. If you visit our home page (http://noahsdad.com/) and look on the side bar under the "new normal" picture you will see a "Reece's Rainbow" image. I'm trying to remove that white around the image. I pasted in the code below, but it's not doing anything. Any thoughts as to what I'm doing wrong?
Thanks.
#text-23 { background: none}
the reason it's not working is the background: none is never getting to the img which has the background set on it (backgrounds don't cascade down they exist in the element and you can have multiple elements layered on top of each other much like a painting. Which has the effect of the background cascading)
#text-23 img { background: none; }
that should resolve your problems. I am assuming that when you call the class textwidget you still want it to append the white background, just not for this instance. So if you set the above it will cascade properly with the correct specificity while leaving the rest of your page alone.
This can also be done by
#text-23 .textwidget img { background: none; }
but that level of specificity is not required. However if you try to just do:
.textwidget img { background: none; }
this will override all of the instances where the background is set on an image in the textwidget container.
You have added the white border yourself by setting the following in line 884 of style.css:
.textwidget img {
background: #fff;
padding: 5px;
max-width: 290px;
}
Simply remove the background declaration. If you only want to remove this instance of a white border, add the following rule:
#text-23 .textwidget img {
background: none;
}
This seems to be the conflicting CSS class.
.textwidget img {
background: white;
padding: 5px;
max-width: 290px;
}
If you want to debug css you should really look into Firebug(a plugin for Firefox) or Opera and use builtin dragonfly
These allow you to rightclick on your HTML page and inspect it.
Go to your style.css file and search for .textwidget img and change the background-color property to none. It is currently set to #FFFFFF which is the hex color code for white and is resulting in the white border or background (precisely).
.textwidget img {
background-color: none;
}
I found this code from here: http://www.cssportal.com/form-elements/text-box.htm
But the problem is you can still see the rectangular shape of the textbox whenever you click inside it. What would be the fix for this? So that the highlight will go with the image with rounded corners
/* Rounded Corner */
.tb5 {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
.tb5a {
border: 0;
width:220px;
margin-top:3px;
}
This should only occur in some browsers such as Google Chrome, it is meant to help with usability and accessibility but it can cause issues with some styling. What you want to do is remove the dynamic outlines like this:
input[type="text"] {
outline: none;
}
In addition, you can try highlighting the text box still by including a background image change using a psedo-selector like :focus
input[type="text"]:focus {
background: url(images/rounded-focused.gif) no-repeat top left;
}