CSS remove default blue border - html

I have a form with multiple buttons where I use a JavaScript to submit the second button when some one presses enter.
This works great but if I open this form in IE the first button gets a blue border that tells the user "this is the button that will be pressed when you press enter".
Is there any way to remove that with CSS without overriding the rest of the button's styling?
Example:
<button onclick="javascript:alert('remove');">Remove name</button>

Think this should work (only tested IE10 on PC) for the border:
button { outline: 0; }
Want to remove the background (needed on WebKit/Blink)?
Add:
background: none;
Need to get rid of the border (removes background on IE10 too):
border: 0;

Use this code:
button { border:0;}

my solution (after a few months)
button:focus {
outline: 0;
box-shadow: none;
}

Use this code:
button {
border : 0px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
}

This may help you. Use following CSS properties:
input,
input:active,
input:focus {
outline: 0;
outline-style: none;
outline-width: 0;
}

#sideToggle:focus, #sideToggle:active{
outline: 0;
outline-style:none;
outline-width:0;
}
This solved my problem if anyone else visits the post. I added my own styles separately, as they really aren't central to the issue.

button{border:none; border-radius:4px; -moz-border-radius:4px;}

Simply add border-radius to develop the button look:
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;

Related

Getting blackish border when the button is in hover state or active state [duplicate]

I'm working on a web page, and I want custom-styled <button> tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an annoying blue border around it. I thought button:active { outline: none } or button:focus { outline:none } would work, but neither do. Any ideas?
This is what it looks like before being clicked (and how I want it to still look after being clicked):
And this is the border I'm talking about:
Here is my CSS:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.
That said, if you insist, this CSS should work:
button:focus {outline:0;}
Check it out or JSFiddle: http://jsfiddle.net/u4pXu/
Or in this snippet:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
button:focus {outline:0;}
<button class="launch">Launch with these ads</button>
<button class="change">Change</button>
Wait! There's a reason for that ugly outline!
Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.
Possible Solution: Darken Buttons when focused
For the examples below, Chrome's blue outline was first removed by using button:focus { outline:0 !important; }
Here are your basic Bootstrap buttons as they appear normally:
Here are the buttons when they receive focus:
Here the buttons when they are pressed:
As you can see, the buttons are a little darker when they receive focus. Personally, I would recommend making the focused buttons even darker so that there is a very noticeable difference between the focused state and the normal state of the button.
It's not just for disabled users
Making your site more accessible is something that is often overlooked but can help create a more productive experience in your website. There are many normal users that use keyboard commands to navigate through websites in order to keep hands on the keyboard.
In my instance of this problem I had to specify box-shadow: none
button:focus {
outline:none;
box-shadow: none;
}
I just remove the outline from all the tags in the page by selecting all and applying outline:none to everything:)
*:focus {outline:none}
As bagofcole mentioned, you might need to add !important as well, so the style will look like this:
*:focus {outline:none !important}
Don't forget the !important declaration, for a better result
button:focus {outline:0 !important;}
A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.
Removing outline is terrible for accessibility! Ideally, the focus ring shows up only when the user intends to use the keyboard.
Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS, and is supported in Firefox (caniuse). Until other major browsers support it, you can use this robust polyfill.
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
outline: none;
}
/* Optional: Customize .focus-visible */
.focus-visible {
outline-color: lightgreen;
}
I also wrote a more detailed post just in case you need more info.
Add this in your CSS file.
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
The fix for Chrome and other browsers
button:focus { outline: none !important; box-shadow: none !important; }
Use either this:
:active {
outline:none;
}
or this if that doesn't work:
:active {
outline:none !important;
}
This works for me (FF and Chrome, at least). Instead of targeting the :focus state, just target the :active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. Both parties are happy. :)
for this problem:
use this:
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
result:
Most of the solutions will not work if you're using Bootstrap 4.1 and possibly other versions. After much head banging, I discovered you need to apply the shadow-none class:
<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>
For anyone using Bootstrap and having this problem, they use :active:focus as well as just :active and :focus so you'll need:
element:active:focus {
outline: 0;
}
Hopefully saved someone some time figuring that one out, banged my head for bit wondering why such a simple thing wasn't working.
I had the same problem with bootstrap. I solved with both outline and box-shadow
.btn:focus, .btn.focus {
outline: none !important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}
This is what worked for me:
button:focus {
box-shadow:none;
}
Another way to solve the accessibility problem that hasn't been mentioned here yet is through a little bit of Javascript. Credits go this insightful blogpost from hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
The approach here is really simple yet effective: Adding a class when people start using the tab-key to navigate the page (and optionally remove it when the switch to mouse again. Then you can use this class to either display a focus outline or not.
function handleFirstTab(e) {
if (e.keyCode === 9) { // the "I am a keyboard user" key
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', handleFirstTab);
}
}
window.addEventListener('keydown', handleFirstTab);
try this code for all element which have blue border problem
*{
outline: none;
}
or
*{
outline-style: none;
}
Until all modern browsers will start support css-selector :focus-visible,
the simplest and possibly best way to save accessibility is to remove this tricky focus only for mouse users and to save it for keyboard users:
1.Use this tiny polyfill (about 10kb): https://github.com/WICG/focus-visible
2.Add next code somewhere in your css:
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
Browser-support of css4-selector :focus-visible right now very weak:
https://caniuse.com/#search=focus-visible
I faced the same issue so I used simple CSS-
.custom-button {
outline: none
}
If you want to delete same effect in input, you could add the following code as well as button.
input:focus {outline:0;}
Simply write outline:none;. No need to use pseudo element focus
Ok, even with the risk of never getting anyone to see this, because there are already so many answers I wanted to offer more js solutions as of the year 2020 there are plenty:
outline.js or alternatively outliner.js both libraries solving exactly the issues we all have here: remove outlines for mice but keep keyboard functionality or accessability.
So instead of deciding which is more important style or accessability, choose both!
Use this bellow code for Chakra UI,
:focus {
box-shadow: none !important;
}
*[data-focus] {
box-shadow: none !important;
}`
This is an issue in the Chrome family and has been there forever.
A bug has been raised https://bugs.chromium.org/p/chromium/issues/detail?id=904208
It can be shown here: https://codepen.io/anon/pen/Jedvwj as soon as you add a border to anything button-like (say role="button" has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse.
I highly recommend using this fix: https://github.com/wicg/focus-visible.
Just do the following
npm install --save focus-visible
Add the script to your html:
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
or import into your main entry file if using webpack or something similar:
import 'focus-visible/dist/focus-visible.min';
then put this in your css file:
// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
outline: magenta auto 5px;
}
You can just set:
button:focus {outline:0;}
but if you have a large number of users, you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.
To remove blue background on tap, i use
button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

Remove borders around textarea and input fields?

I have the following problem - my textarea and input fields are semitransparent, but I can't remove the border around them completely. I tried making transparent borders or specifying border: none; but they do not disappear (see the image below)
Anyone knows a good solution?
Thank you!
Try this :
textarea {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
First, be sure that the borders are indeed applied on textarea, input elements and not other elements such as their parents.
Then, make sure that the border styles are not applied with !important in css files on textarea, input elements.
Finally
$('textarea, input').css('border', 'none !important');
Why are you asking for javascript ?
Try this :
// No border
border-width: 0;
// No box shadow
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
// No outline (ex: blue shadow on Mac OsX on focus)
outline: 0;
If you have a class with the specific rules you can use:
$("#idTextarea").addClass("classYouNeed");
if you have only remove the border
$("#idTextarea").css('border', 'none');
Even if you want to use only JavaScript:
document.getElementById("#idTextarea").style.borderStyle = "none";
Perhaps a bit heavy-handed, but rather than "remove" the borders, why not simply specify their colour as being the same as the background colour?

How to customize HTML submit buttons?

How would I make a submit button appear as just plain text which will override the default browser button style?
I have searched the internet but all I find is how to put a image for a submit button.
You will need background-color: transparent; (Or you can use hex as well) and border: 0;, that will get you the desired result.
input[type="submit"].plain {
border: 0;
background: transparent; /* Or whatever background color you want to use */
}
Demo
input[type=submit] {
border:none;
background-color:white;
}
And an example you can find here:
http://jsfiddle.net/f7x35/
You could style it something like this, and then make the needed tweaks to it to make it fit the rest of your design.
input[type=submit]{
border: 0px;
background: inherit;
padding: 0;
}
The background: inherit; is to make sure it follows your original background color.

Focus outline appears after padding in firefox

I have the following style class for button -
.buttonStyleClass {
padding:5px 20px;
}
When I try to focus the button in Firefox, then focus outline is appearing inside the button after padding. But when you verify the same in Chrome you will find the focus to entire button including padding.
In my application focus outline seems to odd in firefox since it is appearing 20 pixels inside of button.
Is there any CSS fix for this issue ?
Thanks,Gopal
Actually in both Firefox and Chrome I see the outline OUTSIDE of the button... Check out this fiddle. You can easily hide the outline though:
.buttonStyleClass { outline: 0; }
If this is not the answer; could you provide us with a fiddle or screenshot of what you mean?
edit
It's probably a bit OS-specific, as I only saw the dotted (inner) outline when I added a explicit border to the button (button { border: 1px solid red; }).
You can remove, or alter, the outline with the :-moz-focus-inner selector, like this:
button::-moz-focus-inner { border:0; padding: 0; }
Also check out the updated fiddle
I realize this is a very old question, but no one has actually answered the question yet, and several people have given bad advice. Given I got here via Google, other people may come here and leave with that bad advice.
For accessible reasons, you should never remove styling like this, unless you replace it with something better.
Instead of:
button::-moz-focus-inner {
border:0;
padding: 0;
}
Try:
button::-moz-focus-inner {
padding: inherit;
}
Try out this
button { padding: 10px; border: 1px solid red;}
button.no-outline { border: 1px solid blue; }
button.no-outline::-moz-focus-inner { outline: none; border:0; padding: 0; }
button.better-outline {border: 1px solid green; }
button.better-outline::-moz-focus-inner { padding: inherit; }
<button>my button</button>
<button class="no-outline">without outline</button>
<button class="better-outline">with better outline</button>
Add this to your CSS.
.buttonStyleClass:active {
outline: 0;
}
Are you viewing this in a web browser? You said 'application' in your query.
If I understand correctly you are saying that:
Chrome : outlines around the button area inside padding.
Firefox : outlines the area outside padding.
This is a browser specific rendering problem.
Two solutions come to mind.
Don't use padding for you button instead use:
.buttonStyleClass {
height:50px;
line-height:50px;
text-align:center;
}
Alternatively use -webkit targeting to write specific browser css markup.
http://jsfiddle.net/JV6MH/4/
This fiddle should render focus outline the same in both firefox and chrome by avoiding the use of padding on buttons.

Help removing black border on focus of input button in IE

In IE 7 and lower I cannot get rid of the black border that appears when a input button has focus. I have tried:
input:focus {
outline-width:0;
outline:none;
border: 1px solid #FFF;
}
in CSS but it does not do anything. Any ideas?
You need to set border-color to transparent to remove the border in IE. Like this:
input:focus{
border: none;
border-color: transparent;
}
Read more about it here: http://bitesizebugs.wordpress.com/2009/08/17/border-none-not-working-on-text-input-in-internet-explorer/
I saw this from someone here.
the link:https://stackoverflow.com/a/39524745/12815454
.your_button_class:focus{
outline=0px;
}
Thank you Jordi!