I have this styling:
#bbpress-forums li.bbp-forum-freshness a:hover, #bbpress-forums li.bbp-topic-freshness a:hover {
text-decoration: underline;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Yet, when I hover over the links:
As you can see they are still showing shadow effects. I have been able to use the aforementioned approach in other classes.
The page:
https://www.publictalksoftware.co.uk/support-forums/
Any advice appreciated. I just want it to be a underline with no shadow.
Try this:
.bbp-forum-title:hover, .bbp-forum-freshness a:hover {
background: transparent!important;
border-top: none!important;
}
Looks like it's a background color, not a box shadow.
Try to add to your class :
background: none;
border: none;
And you dont need to reset box-shadow.
Related
I want to remove the white edges and the black shadow from my text box in the page of https://help.penny.co/portal/en/home:
Here's what I tried:
.SearchBox__searchpart{
background-color:transparent;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
This is the input text CSS:
.SearchBox__searchpart input {
background-color: transparent;
border: 1px solid #818a91;
vertical-align: middle;
border-radius: 24px;
}
The shadow that you see is applied to #searchContainer, try this in your stylesheet:
#searchContainer {
box-shadow: none;
}
The problem is you're targeting the wrong element. The element with box shadow in the website you posted is the element with the class Header__searchLink. If you set box-shadow: none; on that element, you'll achieve nirvana.
Look at the parent of the input element and and a css box-shadow: none; there.
Next time you ask, please add more details so that you can find answers easily.
In my menu when you select an item in my vertical nav you can see a little border below of the item HERE, how can I delete that border?
I tried this but didn't work too
.nav-tabs li, .nav-tabs li a {
border-bottom: none;
}
Picture of the border
https://www.screencast.com/t/BWNUP1n3
You need to remove box-shadow from class main-purple
.main-purple {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
Give the class on the main ul element like
tab-button
than style it
.tab-buttons {border-bottom: 0px !important;}
I think your problem is within #vertical-nav
if you remove all box-shadow it will remove your "border" under HERE
EDIT: After seeing the screenshot yes just replace the #vertical-nav with this:
#vertical-nav {
padding-left: 0;
padding-right: 0;
color: #fff;
}
I am not sure this is about CSS. In gatsby-starter-blog links( ) have additional underline. I mean, when you look at the source code, you will see text-decoration: none; And this works! (You can try to change it underline, line-through etc), however, there are additional lines for links and I cannot get rid of them.
They have a box-shadow prop giving the underline (That way it's spaced a little wider and gives a nicer look instead of a tight underline):
a {
/* This first prop */
box-shadow: 0 1px 0 0 currentColor;
color: #007acc;
text-decoration: none;
}
so just cancel it out with your custom css:
a {
box-shadow: none;
}
It's use box-shadow property on anchor tag for bottom border. Change box-shadow: 0 1px 0 0 currentColor; to box-shadow: none; will resolve your issue. Thanks
a {
box-shadow: none;
color: #007acc;
text-decoration: none;
}
How can i disable this:
I was working with this half hour. Can't find who places these borders. Button is transparent. I've tried doing:
input[type="submit"]:active,
input[type="submit"]:focus {
-moz-outline-style: none!important;
outline:none!important;
outline:0!important;
}
Still nothing..
To me it looks like a shadow to remove a shadow you can do:
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
and in case it's a border just try
border: 0px;
This question already has answers here:
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 7 years ago.
I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?
You should be able to remove it using
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.
I had to do all of the following to completely remove it:
outline-style: none;
box-shadow: none;
border-color: transparent;
Example:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
To remove the default focus, use the following in your default .css file :
:focus {outline:none;}
You can then control the focus border color either individually by element, or in the default .css:
:focus {outline:none;border:1px solid red}
Obviously replace red with your chosen hex code.
You could also leave the border untouched and control the background color (or image) to highlight the field:
:focus {outline:none;background-color:red}
:-)
This will definitely work. Orange outline won't show up anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus{
outline:none;
}
border:0;
outline:none;
box-shadow:none;
This should do the trick.
The simpliest way is to use something like this but note that it may not be that good.
input {
outline: none;
}
I hope you find this useful.
you could just set outline: none; and border to a different color on focus.
Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}