Menu
I have a custom button class (created on-line as this is my first attempt at a web page). When it is clicked and until something else is clicked a grayish border appears around the button as a box with probably a two pixel thickness. When something else is clicked it goes away (My custom button has rounded corners so it is quite visible.
This does not appear on Safari on OS-X but does appear with Chrome. With FireFox the border is 1 pixel thick and appears a box inside my custom box. (It's not going to run on IE as we are stuck with IE8 for a while.) It is annoying.
HTML:
<button class='command-btn' type='button' id='find-camera-btn'>Find Camera</button>
CSS3:
.command-btn {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: blue;
width: 130px;
height: 40px;
float: left;
margin: 6px 0px 5px 10px;
background: -moz-linear-gradient(top, #0aa31b 0%, #d7de16 99%, #ebeb0e);
background: -webkit-gradient(linear, left top, left bottom, from(#0aa31b),
color-stop(0.99, #d7de16), to(#ebeb0e));
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
border: 1px solid #6d8000;
-moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px
2px rgba(255, 255, 255, 1);
box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
rgba(255, 255, 255, 1);
text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
rgba(255, 255, 255, 0.4);
}
I'm using Dart but it doesn't matter what code is in the "OnClick" method. If I could move the focus after the click that would solve the problem but I don't know how to do that.
383
However, you can use CSS to remove the border: Step 1) Add HTML: Example <p contenteditable="true">This is an editable paragraph.</p> Step 2) Add CSS:
The border property is used to provide the borders to the buttons for which we use border-radius property is used for styling button borders for rounding the corners of the buttons. We can also provide give double stroke by adding another border property on the inner span element by reducing the border-radius property. Working of CSS Button Border
Learn how to remove the border from an editable element. Remove Contenteditable Border By default, when you write inside an element that has contenteditableset to true, that element gets a border around on focus. However, you can use CSS to remove the border: Step 1) Add HTML: Example <p contenteditable="true">This is an editable paragraph.</p>
Also, you can remove the default borders on certain sides by setting them to "transparent". See another example where the outline: none; is set for <input>, <textarea> and <select> fields. How can we improve it? Thanks for your feedback!
Addind the rule:
outline: 0;
should do the work
79
.command-btn,
.command-btn:focus,
.command-btn:active {
border: 0;
outline: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
