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.
I have a grid of buttons in which it is easier for me to make some buttons invisible then not creating them. They have no function and are only placeholder. They have a styleclass attached to them called transparent. I was mostly able to hide them but there is still a line around them left that is not fully transparent. It kinda looks like the shadow of the button or something. I tried hiding them with the following CSS:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
}
How can I hide that last bit of the buttons? They are ToggleButtons. Not sure if that is important
Even though I am using GTK3 I looked at the documentation for GTK4 and there I found the right property. It was indeed a shadow and it can be removed with: box-shadow: none;
My solution now looks like:
.transparent {
background: transparent;
outline-color: transparent;
border-color: transparent;
color: transparent;
box-shadow: none;
}
try this:
.transparent {
opacity: 0;
}
You could use display: none or visibility: hidden.
display: none removes the element from the page, and other elements can take its place, whereas visibility: hidden leaves the element in its place and just hides it.
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.
Here is the design for the tabs
I need each tab to be the same width. The top green border on active tab should be over the left and right borders.
Here is the code I've written so far: http://jsbin.com/ricuzubo/1/edit
Can anyone help me?
Instead of applying border-right: none; to your anchor tag, remove that style and add margin-right: -10px to it. This will do the trick.
SEE THE DEMO and THE CODE for reference.
li a {
border: 10px solid #ccc;
margin-right: -10px;
}
li.active a {
box-shadow: 0px -10px 0px green;
}
If you can use CSS3 remove your border and add this effect using box-shadow.
Like This:
li.active a
{
box-shadow: 0px -10px 0px green;
}
Here is a FSfiddle: http://jsfiddle.net/NicoO/BcA6K/
I've solved your problem here using some jQuery and CSS.
Good Luck!
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:
#mydiv {
outline-color: transparent;
outline-style: none;
}
On textarea resizing in webkit based browsers:
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
To customize the look and feel of webkit form elements from scratch:
-webkit-appearance: none;
I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.
-webkit-tap-highlight-color: rgba(0,0,0,0);
This disables the default button highlighting in webkit mobile browsers
Carl W:
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
I’ll explain this:
:focus means it styles the elements that are in focus. So we are styling the elements in focus.
outline-color: transparent; means that the blue glow is transparent.
outline-style: none; does the same thing.
This is the solution for people that do care about accessibility.
Please, don't use outline:none; for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.
Check out this article that I've written to explain how to remove the border in an accessible way.
The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.
If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
This solution worked for me.
input:focus {
outline: none !important;
box-shadow: none !important;
}
some times it's happens buttons also then use below to remove the outerline
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.
input.slidingdoorbutton:focus { outline: none;}
I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Tested in Firefox and in Chrome.
Sure! You can remove blue border also from all HTML elements using *
*{
outline-color: transparent;
outline-style: none;
}
And
*{
outline: none;
}