ลบเค้าร่างออกจากกล่องเลือกใน FF

เป็นไปได้ไหมที่จะลบเส้นประรอบรายการที่เลือกในองค์ประกอบที่เลือก

ฉันพยายามเพิ่มoutlineคุณสมบัติใน CSS แต่ไม่ได้ผลอย่างน้อยก็ไม่ใช่ใน FF

<style>
   select { outline:none; }
</style>

อัปเดต
ก่อนที่คุณจะดำเนินการต่อและลบโครงร่างโปรดอ่านสิ่งนี้
http://www.outlinenone.com/

ฉันพบวิธีแก้ปัญหา แต่มันเป็นแม่ของแฮ็กทั้งหมดหวังว่ามันจะเป็นจุดเริ่มต้นสำหรับโซลูชันที่มีประสิทธิภาพอื่น ๆ ข้อเสีย (ใหญ่เกินไปในความคิดของฉัน) คือเบราว์เซอร์ใด ๆ ที่ไม่รองรับtext-shadowแต่รองรับrgba(IE 9) จะไม่แสดงข้อความเว้นแต่คุณจะใช้ไลบรารีเช่น Modernizr (ไม่ได้ทดสอบเป็นเพียงทฤษฎี)

Firefox ใช้สีข้อความเพื่อกำหนดสีของเส้นประ พูดว่าถ้าคุณทำ ...

select {
  color: rgba(0,0,0,0);
}

Firefox จะแสดงเส้นประโปร่งใส แต่แน่นอนว่าข้อความของคุณก็จะโปร่งใสเช่นกัน! ดังนั้นเราต้องแสดงข้อความอย่างใด text-shadowมาช่วย:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

เราใส่เงาข้อความโดยไม่มีการชดเชยและไม่เบลอเพื่อแทนที่ข้อความ แน่นอนว่าเบราว์เซอร์รุ่นเก่าไม่เข้าใจสิ่งนี้ดังนั้นเราจึงต้องระบุทางเลือกสำหรับสี:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

นี่คือตอนที่ IE9 เข้ามาเล่น: รองรับrgbaแต่ไม่ใช่ text-shadow ดังนั้นคุณจะได้รับกล่องเลือกที่ว่างเปล่าอย่างเห็นได้ชัด รับ Modernizr เวอร์ชันของคุณด้วยtext-shadowการตรวจจับและทำ ...

.no-textshadow select {
  color: #000;
}

สนุก.

ดีคำตอบ Duopixel ของเป็นที่สมบูรณ์แบบธรรมดา หากเราก้าวไปอีกขั้นเราสามารถทำให้มันกันกระสุนได้

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

เอาล่ะใช้ได้เฉพาะกับ Firefox และเส้นประที่น่าเกลียดรอบตัวเลือกที่เลือกจะหายไป

นี่คือการทำงานร่วมกันของโซลูชันเพื่อแก้ไขปัญหาการจัดรูปแบบกับกล่องเลือก Firefox ใช้ตัวเลือก CSS นี้เป็นส่วนหนึ่งของการรีเซ็ต CSS ตามปกติของคุณ

คลาสจะลบโครงร่างตามคำถาม แต่ยังลบภาพพื้นหลังใด ๆ (เนื่องจากฉันมักใช้ลูกศรแบบเลื่อนลงที่กำหนดเองและลูกศรแบบเลื่อนลงของระบบ Firefoxes ไม่สามารถลบออกได้ในขณะนี้) หากใช้ภาพพื้นหลังสำหรับสิ่งอื่นที่ไม่ใช่ภาพแบบเลื่อนลงให้ลบเส้นออกbackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

การดำเนินการนี้จะกำหนดเป้าหมายเวอร์ชัน Firefox ทั้งหมด

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

คุณอาจต้องการลบ! important ออกหากคุณวางแผนที่จะให้เค้าร่างปรากฏบนหน้าอื่น ๆ ในไซต์ของคุณที่ใช้สไตล์ชีตเดียวกัน

โดยทั่วไปแล้วตัวควบคุมแบบฟอร์มไม่สามารถกำหนดสไตล์ให้มีความแม่นยำได้ ไม่มีเบราว์เซอร์ใดที่ฉันทราบว่ารองรับคุณสมบัติที่เหมาะสมในการควบคุมทั้งหมด นั่นเป็นเหตุผลว่าทำไมจึงมีไลบรารี JavaScript กว่าพันล้านรายการที่ควบคุมรูปแบบ "ปลอม" ด้วยรูปภาพและองค์ประกอบ HTML อื่น ๆ และเลียนแบบฟังก์ชันการทำงานเดิมด้วยโค้ด:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

หากคุณใช้สิ่งนี้เส้นขอบจะคงอยู่จนกว่าคุณจะเลือกรายการจากรายการ

ลองทำอย่างใดอย่างหนึ่งต่อไปนี้:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

ข้อมูลอ้างอิง

วิธีแก้ปัญหามาที่นี่

:focus {outline:none;}
::-moz-focus-inner {border:0;}

ลบเส้นขอบ / เส้นประจาก Firefox All Selectable Tags

ใส่รหัสบรรทัดนี้ในสไตล์ชีตของคุณ:

*:focus{outline:none !important;}   

เพิ่มสไตล์เส้นขอบ: ไม่มีให้เลือกใน CSS

select {
border-style: none; }

ขั้นตอนที่ 1) เพิ่ม HTML: เพิ่มตัวเลือกที่คุณเลือกและเพิ่มแอตทริบิวต์: contenteditable = "true"

ขั้นตอนที่ 2) เพิ่ม CSS: ใช้ตัวเลือก [แอตทริบิวต์] เพื่อเลือกองค์ประกอบทั้งหมดที่สามารถแก้ไขได้และลบเส้นขอบที่มีคุณสมบัติเค้าร่าง:

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

ทำงาน 100%

การดำเนินการนี้จะลบโฟกัสออกจากselectองค์ประกอบและโครงร่าง :

$("select").click(function(){
    $(this).blur();
});

แม้ว่าจะไม่มีข้อบกพร่องในเบราว์เซอร์อื่น คุณจะต้องตรวจสอบเบราว์เซอร์ที่ผู้ใช้ใช้:

if (FIREFOX) {
    //implement the code
}