Safari / Chrome metin girişi / textarea ışımayı kaldırma

CSS kullanarak bir metin giriş / metin alanına tıkladığımda varsayılan mavi ve sarı parlaklığı kaldırmak mümkün mü merak ediyorum?

textarea, select, input, button { outline: none; }

Bununla birlikte, ışıma / anahattı tutmanın erişilebilirlik için gerçekten yararlı olduğu iddia edildi, çünkü kullanıcıların şu anda hangi Elementin odaklandığını görmelerine yardımcı olabilir.

Girişleri yalnızca kullanıcı seçtiğinde girişleri hedeflemek için ': focus' sözde öğesini de kullanabilirsiniz.

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Bu etki, giriş olmayan elemanlarda da ortaya çıkabilir. Aşağıdaki çalışmaları daha genel bir çözüm olarak buldum

:focus {
  outline-color: transparent;
  outline-style: none;
}

Güncelleme::focus Seçiciyi kullanmanız gerekmeyebilir . Bir öğeniz varsa, diyelim <div id="mydiv">stuff</div>ve bu div öğesinde dış ışıltı alıyorsanız, normal gibi uygulayın:

#mydiv {
  outline-color: transparent;
  outline-style: none;
}

Webkit tabanlı tarayıcılarda textarea yeniden boyutlandırma hakkında:

Metin alanında maksimum yüksekliğin ve maksimum genişliğin ayarlanması, görsel yeniden boyutlandırma tutamacını kaldırmaz. Deneyin:

resize: none;

(ve evet, "kullanıcının beklentilerini ihlal eden herhangi bir şey yapmaktan kaçınmaya çalışın" fikrine katılıyorum, ancak bazen mantıklı, yani bir web uygulaması bağlamında)

Webkit form öğelerinin görünümünü ve hissini sıfırdan özelleştirmek için:

-webkit-appearance: none;

Carl W :

Bu etki, giriş olmayan elemanlarda da ortaya çıkabilir. Aşağıdaki çalışmaları daha genel bir çözüm olarak buldum

:focus {
  outline-color: transparent;
  outline-style: none;
}

Bunu açıklayacağım:

• :focusodaktaki öğeleri biçimlendirdiği anlamına gelir. Yani odaktaki unsurları şekillendiriyoruz.
• outline-color: transparent; mavi ışığın şeffaf olduğu anlamına gelir.
• outline-style: none; aynı şeyi yapar.

Bunu divbir tıklama etkinliğinin olduğu bir deneyim yaşadım ve 20 aramadan sonra günümü kurtaran bu snippet'i buldum.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Bu, webkit mobil tarayıcılarında varsayılan düğme vurgulamayı devre dışı bırakır

Bu, erişilebilirliği önemseyen insanlar için bir çözümdür .

Lütfen, outline:none;odak çerçevesini devre dışı bırakmak için kullanmayın . Bunu yaparsanız web'in erişilebilirliğini öldürüyorsunuz. Bunu yapmanın erişilebilir bir yolu var.

Sınırın erişilebilir bir şekilde nasıl kaldırılacağını açıklamak için yazdığım bu makaleye göz atın .

Kısacası ana hat kenarlığını yalnızca bir klavye kullanıcısı tespit ettiğimizde göstermektir. Bir kullanıcı faresini kullanmaya başladığında anahattı devre dışı bırakırız. Sonuç olarak ikisinden en iyisini elde edersiniz.

Işıma Bootstrap'deki düğmelerden kaldırmak istiyorsanız (bence kötü UX olması gerekmez), aşağıdaki koda ihtiyacınız olacaktır:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}

Bu çözüm benim için çalıştı.

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

bazı durumlarda olur da dış çizgiyi kaldırmak için aşağıdaki düğmeleri kullanın

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}

<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>

Anahat, sürgülü kapı görüntüsünün sağ "kapağını" kapsamaz, çünkü odaklama durumu biraz sakat görünüyor.

input.slidingdoorbutton:focus { outline: none;}

Bu etkiyi metin girdi alanlarımdan kaldırmam gerekiyordu ve diğer tekniklerin tam olarak çalışmasını sağlayamadım, ama bu benim için işe yarıyor;

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

Firefox ve Chrome'da test edildi.

Elbette! * Kullanarak mavi kenarlığı tüm HTML öğelerinden de kaldırabilirsiniz

*{
    outline-color: transparent;
    outline-style: none;
  }

Ve

 *{
     outline: none;   
   }