ลบ Safari / Chrome textinput / textarea glow

ฉันสงสัยว่าเป็นไปได้หรือไม่ที่จะลบการเรืองแสงสีน้ำเงินและสีเหลืองเริ่มต้นเมื่อฉันคลิกที่พื้นที่ป้อนข้อความ / ข้อความโดยใช้ CSS?

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

แม้ว่าจะเป็นที่ถกเถียงกันอยู่ว่าการรักษาแสง / โครงร่างนั้นเป็นประโยชน์สำหรับการเข้าถึงได้จริง ๆ เพราะสามารถช่วยให้ผู้ใช้เห็นว่าองค์ประกอบใดที่เน้นอยู่ในปัจจุบัน

นอกจากนี้คุณยังสามารถใช้องค์ประกอบหลอก ': โฟกัส' เพื่อกำหนดเป้าหมายอินพุตเฉพาะเมื่อผู้ใช้เลือก

ตัวอย่าง: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

ผลกระทบนี้สามารถเกิดขึ้นได้กับองค์ประกอบที่ไม่ใช่อินพุตเช่นกัน ฉันพบว่างานต่อไปนี้เป็นวิธีแก้ปัญหาทั่วไปที่มากกว่า

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

อัปเดต:คุณอาจไม่ต้องใช้:focusตัวเลือก หากคุณมีองค์ประกอบพูด<div id="mydiv">stuff</div>และคุณได้รับการเรืองแสงด้านนอกในองค์ประกอบ div นี้ให้ใช้เหมือนปกติ:

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

ในการปรับขนาด textarea ในเบราว์เซอร์ที่ใช้ webkit:

การตั้งค่าความสูงสูงสุดและความกว้างสูงสุดบน textarea จะไม่ลบจุดจับการปรับขนาดภาพ ลอง:

resize: none;

(และใช่ฉันเห็นด้วยกับ "พยายามหลีกเลี่ยงการทำสิ่งใดที่ทำลายความคาดหวังของผู้ใช้" แต่บางครั้งมันก็สมเหตุสมผลเช่นในบริบทของเว็บแอปพลิเคชัน)

ในการปรับแต่งรูปลักษณ์ขององค์ประกอบแบบฟอร์ม webkit ตั้งแต่ต้น:

-webkit-appearance: none;

Carl W :

ผลกระทบนี้สามารถเกิดขึ้นได้กับองค์ประกอบที่ไม่ใช่อินพุตเช่นกัน ฉันพบว่างานต่อไปนี้เป็นวิธีแก้ปัญหาทั่วไปที่มากกว่า

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

ฉันจะอธิบายสิ่งนี้:

• :focusหมายความว่ามันเป็นลักษณะองค์ประกอบที่อยู่ในโฟกัส ดังนั้นเราจึงจัดแต่งองค์ประกอบที่อยู่ในโฟกัส
• outline-color: transparent; หมายความว่าเรืองแสงสีน้ำเงินมีความโปร่งใส
• outline-style: none; ทำสิ่งเดียวกัน

ฉันพบสิ่งนี้ในเหตุการณ์divที่มีการคลิกและหลังจากการค้นหา 20 ครั้งฉันพบข้อมูลโค้ดนี้ที่บันทึกวันของฉัน

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

สิ่งนี้จะปิดใช้งานปุ่มเริ่มต้นที่เน้นอยู่ในเบราว์เซอร์มือถือของ webkit

นี่คือวิธีการแก้ปัญหาสำหรับคนที่จะดูแลเกี่ยวกับการเข้าถึง

กรุณาอย่าใช้outline:none;สำหรับปิดการใช้งานเค้าร่างโฟกัส คุณกำลังฆ่าการเข้าถึงเว็บถ้าคุณทำเช่นนี้ มีวิธีที่สามารถเข้าถึงได้ในการทำเช่นนี้

ลองอ่านบทความที่ฉันเขียนขึ้นเพื่ออธิบายวิธีลบเส้นขอบในวิธีที่เข้าถึงได้

แนวคิดสั้น ๆ คือแสดงเส้นขอบเค้าร่างเฉพาะเมื่อเราตรวจพบผู้ใช้แป้นพิมพ์ เมื่อผู้ใช้เริ่มใช้เมาส์เราจะปิดการใช้งานเค้าร่าง เป็นผลให้คุณได้รับที่ดีที่สุดของทั้งสอง

หากคุณต้องการลบแสงออกจากปุ่มใน Bootstrap (ซึ่งไม่จำเป็นต้องเป็น UX ที่แย่ในความคิดของฉัน) คุณจะต้องใช้รหัสต่อไปนี้:

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

วิธีนี้ใช้ได้ผลสำหรับฉัน

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

บางครั้งมันเกิดขึ้นแล้วใช้ปุ่มด้านล่างเพื่อลบเส้นด้านนอก

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>

ฉันพบว่าเป็นประโยชน์ในการลบโครงร่างในปุ่มป้อนข้อมูลชนิด "ประตูเลื่อน" เนื่องจากโครงร่างไม่ครอบคลุม "ฝาปิด" ที่เหมาะสมของภาพประตูบานเลื่อน

input.slidingdoorbutton:focus { outline: none;}

ฉันแค่ต้องการลบเอฟเฟกต์นี้ออกจากช่องป้อนข้อความของฉันและฉันไม่สามารถใช้เทคนิคอื่นให้ทำงานได้อย่างถูกต้อง แต่นี่เป็นสิ่งที่ใช้ได้ผลสำหรับฉัน

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

    }

ทดสอบใน Firefox และใน Chrome

แน่นอน! คุณสามารถลบเส้นขอบสีน้ำเงินได้จากองค์ประกอบ HTML ทั้งหมดโดยใช้ *

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

และ

 *{
     outline: none;   
   }