it-swarm.com.de

Bootstrap-Schaltfläche - Entfernen Sie die Kontur unter Chrome OS X

Ich freue mich darauf, dies zu erreichen: http://getbootstrap.com/javascript/#popovers-examples - scrollen Sie zur "Live-Demo" und drücken Sie die rote Popover-Schaltfläche in Chrome unter OS X .. Es ist perfekt schön

Nun geh hier (das Sorgenkind): http://yoyo.io/javascript/#popovers - es umreißt blau, aaaargh.

Wenn Sie nachsehen, werden Sie von mir eine Menge CSS-Versuche erhalten, dieses zu entfernen! In Safari und Firefox sieht das korrekt aus, in Chrome jedoch nicht!

Jedermann - was überblicke ich?

Vielen Dank im Voraus!

42
user1583909

Ich sehe, dass .btn:focus eine outline drauf hat:

.btn:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

Ändern Sie dies in:

.btn:focus {
  outline: none;
}

Suchen Sie im Allgemeinen nach allen Instanzen von outline in :focused-Elementen.

79
Nick Heer

Für jeden Googler wie ich, wo ..

.btn:focus {
    outline: none;
}

funktionierte in Google Chrome noch immer nicht;.

.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}
34
shaneparsons
.btn:focus, .btn:active:focus, .btn.active:focus{
    outline:none;
    box-shadow:none;
}

Dies sollte Umrisse und Boxschatten entfernen 

19

In Bootstrap 4 wird nicht mehr die Kontur verwendet, sondern der Box-Schatten. Wenn es Ihr Fall ist, machen Sie einfach folgendes:

.btn:focus {
    box-shadow: none;
}
9
George Henrique

.btn.active oder .btn.focus alleine können nicht überschreiben Bootstrap-Styles Für das Standarddesign:

.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus, 
.btn:active:focus, .btn:focus {
      outline: none;
}
5
Narch Tranch

Mit scss: 

$btn-focus-box-shadow: none!important;
4
Hannes Be

Dies wird es entfernen - kurz und sauber:

.btn {
    outline: none !important;
}
1
Entertain

Suchen und ersetzen

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Ersetzen

outline: 0;
1
Calvin Grain

Die einfachste Lösung ist: Erstellen Sie eine CSS-Datei und geben Sie Folgendes ein:

.btn:focus, .btn:active:focus, .btn.active:focus {
    box-shadow: none !important;
}
1
Decode

Das CSS geht von dieser Datei "tab-focus.less" im mixins-Ordner (es könnte schwierig sein, es zu finden, da mixins nicht in Chrome-Dev-Tools angezeigt werden). Sie sollten das also bearbeiten:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
0
Margarita

Wenn jemand den Bootstrap-Sass-Hinweis verwendet, befindet sich der Code in der Datei _reboot.scss wie folgt:

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

Wenn Sie also die _reboot-Datei beibehalten möchten, können Sie sie wahrscheinlich mit einfachem CSS überschreiben, anstatt nach einer zu ändernden Variablen zu suchen.

0
Diego Ponciano

Wenn die obigen Antworten immer noch nicht funktionieren, fügen Sie Folgendes hinzu:

button:focus{
    outline: none!important;
    box-shadow:none;
}
0
Connor Cowling

sie können dieses Tag in Ihre HTML-Datei einfügen.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

Ich konzentrierte mich darauf, weil Onclick immer noch das Glühen einer Mikrosekunde zeigte und einen schrecklichen Blick in Bezug auf die Verwendung machte. Dies schien sich zu lösen, nachdem alle css-Methoden fehlgeschlagen waren. 

0
Evan Burbidge

Entfernen Sie in den Mixins der Sass-Dateien der Bootstrap-Quellen alle $border-Referenzen (nicht in der Gliederungsvariante).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

Oder einfach Ihren eigenen _customButton.scss mixin codieren.

0
RizzCandy

Hier ist die Lösung:

#sec-one{padding: 15px 0;}
p{text-align: center;}
/*
* Change the color to any color you want;
* or set to none if you don't any outline at all.
*/
*:focus:not(a){
    outline: 2px solid #f90d0e !important;
    box-shadow: none !important;
}
<!doctype html>
<html lang="en">
<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<section id="sec-one">
<div class="container">
    <div class="row">
      <div class="col">
        <form>
          <fieldset class="form-group">
            <input type="text" class="form-control" placeholder="Full Name" required>
          </fieldset>
           <fieldset class="form-group">
            <input type="email" class="form-control" placeholder="Email Address" required>
          </fieldset>
          <fieldset class="form-group">
            <input type="submit" class="btn btn-default" value="Sign Up">
          </fieldset>
          </form>
      </div>
    </div>
</div>
</section>
</body>
</html>

Das funktioniert 100% hoffentlich hilft es Ihnen.

0
nixx