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);
}
Got a nice menu with rounded buttons, and I want to style the dropdown list the same way. Tried a lot of different things but there is two things I need some help with:
1. rounded corners like the rest of the buttons.
2. get a solid color, and not that animated look.
Here is a picture showing the buttons and the dropdown:
Here is the styling on the list:
#topNav .right #categoryButton {
margin-top:5px;
border:3px solid #fff;
background-color:#303030 ;
text-transform:uppercase;
color: #fff;
height:50px;
width:220px;
outline: none;
}
Check out this great article about styling a select dropdown. There are limitations however and some older browsers will render the select box its own way.
It basically involves wrapping the select in a div and styling the div:
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
You can't do that. You have to build your own select element.
From this article discussing "What if you want complete design control?"
First, try everything you
can to make that not necessary. Default form elements are familiar and
work well. Making a dropdown menu match the font and colors of your
brand isn't usually necessary and is more likely obnoxious at best and
bad UX at worst.
If you decide that it's absolutely a good idea to customize a
dropdown, then you should use JavaScript to:
Accessibly hide the original select.
Rebuild the select with custom
markup (probably a definition list), that you style how you want.
Replicate all the functionality that default selects have, which
include: keyboard events like up and down arrow keys and return to
select, scrolling of long lists, opening the menu upwards when select
is against bottom of screen, to name a few.
There's a few more steps to accommodate different client setups and a tutorial linked for more information.
Hi, I have a ASP dropdown control I need to add the CSS for it, I added this class:
select {
padding: 1px;
margin: 0;
background: #f8f8f8;
color: #888;
border-style: ridge;
outline: none;
display: inline-block;
background-image: url("Images/downarrow.png");
appearance: none;
cursor: pointer;
}
but the problem is in IE 8+ the dropdown image is not changing at all, does anyone have a solution?
You can't change the drop down arrow, this is native to each browser.
Theres ways of hacking this for particular browsers, but you'll never get this consistent across all.
The best option would be to use a dropdown plugin, which hides the drop down element, and renders a custom drop down in its place.
For example, you could use something like ddSlick, then customise this to meet your requirements.
How do I cleanly style a HTML + CSS horizontal tab bar so that the tab bar has a line across the bottom that's hidden or suppressed for the active tab?
In other words, I'm trying to do the same thing that StackOverflow does for its tags:
My tab bar is set up as an ordered list with
ul
{
list-style: none;
}
li
{
float: left;
}
Update: I've already poked around sites with Firebug to see how they do it, but I feel like I quickly get bogged down in details. For example, StackOverflow's version has a border for the bottom of the whole div (which makes sense), and a white border for the bottom of the active tab (which makes sense), but then it makes the active tab's border overlap the div's border (and I'm not very clear on how it does that). It looks like Twitter Bootstrap does something similar. I'm trying to understand the general concept of how overlapping part of a container's border with the content's border works instead of copying and tinkering with CSS until I get something that appears to work.
All you need to do is put a bottom border on the <ul> (so that it stretches across) and then give the <li>'s a selected class, and make that one have a 1-pixel higher height.
Here is a very simple example: http://jsfiddle.net/V6gzS/
ok to point you in the right direction use firebug or chromes element inspector and just pick out the bits you need, so on this site for example what you are looking for are called tabs and they are styled like so
#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
}
this is just a part of it but you can learn a lot by looking at some code
As I understand it you are capable of making the buttons by yourself, with the horizontal bottom line.
If that is the case, then make sure that this horizontal line is made as a border-bottom: solid 1px #CCC property on each button (the color might be different). At each page you then add the id id="current" to that one button that is the active page. In CSS you write:
#current {
border: solid 1px #CCC;
border-bottom: 1px solid white;
}
If you have any problems it might be solved by adding !important like this:
border-bottom: 1px solid white !important;
Therefore, this is just four extra lines of code in CSS and one extra HTML attribute in each of the files.
If dynamic menu
If you have a menu that is not static on every page, but maybe dynamically generated or placed in an included file, then the above will not be possible. Because then you can't easily add the new id on each seperate page.
In that case you might do some dynamic adding of the attribute. If a server side language is used, e.g. PHP, then you might be able to easily set up an if{...} command that checks the URL or a GET request or alike. Else you might use some javascript to check each button and add the attribute id if the button text equals some header on the page.
I hope you understand. Good luck.
I did it like this:
ul {
list-style-type:none;
}
li{
float: left;
border-bottom: 1px solid #CCC;
}
li:hover{
float: left;
border: solid 1px #CCC;
border-bottom:none;
}
I'm wondering what html element to use for buttons on a web page - I'd like to style my 'buttons' like twitter does. For example:
http://twitter.com/twitter
the "more" button at the bottom of the tweet listing - is that a <button> element, or a <div> element? I'd like to know which to use. I think for either <button> or <div> we can supply rollover states and all that stuff to make it look pleasant?
Don't use <div> tags to make clickable elements. Use <a> or <button> elements. This enables browsers with JavaScript disabled to interact with them as expected. Even if your functionality requires JavaScript and there is no reasonable default behaviour you can assign to an <a>, use it regardless - it conveys "clickable" semantics.
In general, choose the tag that most closely describes the function of its content, not the appearance of its content, and avoid unnecessary <div> tags lest your documents suffer from divitis.
The "more" button on Twitter is an <a> with a background-image, CSS3 rounded corners, and a border. Here's the complete CSS (elem is <a class="more round">):
.more {
outline: none;
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
border: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color: #fff;
background-repeat: repeat-x;
background-position: left top;
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
height: 22px;
line-height: 1.5em;
margin-bottom: 6px;
background-image: url('/images/more.gif');
}
.more:hover {
border: 1px solid #bbb;
text-decoration: none;
background-position: left -78px;
}
.more:active {
color: #666;
background-position: left -38px;
}
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Sample Button
You should use <a> or <button>, not <div>.
In general you want to use <a> for navigation and <button> for some action that takes place on that screen.
The best reason I can think of to prefer a <button> or <a> tag to <anything-else> is that during testing, it makes it easier to locate the actionable items. I use Capybara and Rspec for example, and the method click_on works a lot more reliably when it refers to a <button>, the same with the method click_link and <a>.
The other reasons given here are also good: semantics, screen readers, etc.
Pragmatically, your audience will decide if every single element on your page is a really fancy <div> or if you want to play nice with the rest of the web dev ecosystem. It may simply depend on whether your audience all uses X browser or not.
One gotcha: Since a <button> could submit a form or <a> take you to another page, you have to make sure to prevent those default actions. In the JavaScript function that handles the click, you have to specify that it only does the action you program.
function onClickEvent(e)
{
e.preventDefault();
// What you want to do instead
}
Use an a tag instead of button. My reasoning involves compatibility issues with older version of IE (IE6 hates the button tag).
<button> vs. <input type="button" />. Which to use?
I'd suggest <input id="Button1" type="button" value="button" /> with a css style to give the appearance that you're looking for.