logo
down
shadow

Avoid outline of button when clicked


Avoid outline of button when clicked

By : user47734
Date : November 19 2020, 01:01 AM
should help you out The gear button below launches a modal window. when the modal is closed. An outline, like the one you see in the screenshot, appears. How do I avoid this? , You need to set outline: none not border: none.
code :
.sticky-settings a:focus {
    outline: none;
}


Share : facebook icon twitter icon
Unwanted outline or border around button when clicked

Unwanted outline or border around button when clicked


By : Benjamin Zhang
Date : March 29 2020, 07:55 AM
will help you If you are talking about the dotted line in Firefox, I think what you're looking for is this:
code :
button::-moz-focus-inner { border: 0; }
How to remove outline on circular button when clicked

How to remove outline on circular button when clicked


By : Zhang Meteor
Date : March 29 2020, 07:55 AM
I hope this helps you . In this example I have changed the border-color from blue to transparent and added outline:none; on :focus (could also add not enabled)
Hope this helps
code :
button {width:50px;
height:50px;
background-image:url("http://www.rachelgallen.com/images/purpleflowers.jpg");
background-size:70% 70%;
background-repeat:no-repeat;
background-position:center center;
border-width:3px;
border-style: solid;
border-color:#000099;
}
button:focus{
 border-color:transparent!important;
 outline:none;
}
<button>

</button>
remove outline from button when clicked

remove outline from button when clicked


By : ACiDC0re
Date : March 29 2020, 07:55 AM
this will help A space is a descendant combinator, you aren't trying targetting the descendants of the button, you are targetting the button itself.
Remove the descendent combinators from your selector.
code :
#test:focus,
#test:active {
  outline: 0;
}
<button id="test">
            <div id="hamburger-btn">
            Needs content to be visible
                <span></span>
                <span></span>
                 <span></span>
                 <span></span>
            </div>
        </button>
bootstrap button shows blue outline when clicked

bootstrap button shows blue outline when clicked


By : 2139147
Date : March 29 2020, 07:55 AM
like below fixes the issue May be your properties are getting overridden. Try attaching !important to your code along with the :active .
How to change blue outline color of a button when clicked [Bootstrap 4]

How to change blue outline color of a button when clicked [Bootstrap 4]


By : Kenji
Date : March 29 2020, 07:55 AM
hope this fix your issue If I click the following button a blue outline appears:
code :
.btn {
  outline-color: red;
}
.btn:active {
  outline-color: red;
}
Related Posts Related Posts :
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Overlapping Anchor Tags When Hovering Over One
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • Inline elements not collapsing whitespace before the end of the tag, in modern browsers?
  • How to add a repeating png image in the background of a webpage using CSS?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org