ลบ Select arrow บน IE

ฉันมีองค์ประกอบเลือกฉันต้องการที่จะเอาลูกศรแล้วฉันสามารถเพิ่มไอคอนอื่น ๆ .. ฉันสามารถทำเช่นนั้นสำหรับ Firefox Safari และ Chrome แต่นี้ไม่ได้ทำงานในIE9

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

SEE ซอบนIE9 สิ่งที่ฉันต้องการคือลบลูกศรใน ie9 โปรดตอบ JSFIDDLE

ใน IE9 เป็นไปได้ด้วยการแฮ็กอย่างเดียวตามคำแนะนำของ @Spudley เนื่องจากคุณได้กำหนดความสูงและความกว้างของ div และเลือกแล้วคุณจึงต้องเปลี่ยนdiv:before css เพื่อให้ตรงกับของคุณ

ในกรณีที่เป็น IE10 แล้วใช้ css3 ด้านล่างก็เป็นไปได้

select::-ms-expand {
    display: none;
}

อย่างไรก็ตามหากคุณสนใจปลั๊กอิน jQuery ให้ลองChosen.jsหรือสร้างของคุณเองใน js

ฉันขอแนะนำวิธีแก้ปัญหาของฉันที่คุณสามารถพบได้ ใน repo GitHubนี้ สิ่งนี้ใช้ได้กับ IE8 และ IE9ด้วยลูกศรที่กำหนดเองซึ่งมาจากแบบอักษรไอคอน

ตัวอย่างการทำงานแบบเลื่อนลง Custom Cross Browser : ตรวจสอบกับเบราว์เซอร์ทั้งหมดของคุณเพื่อดูคุณลักษณะข้ามเบราว์เซอร์

อย่างไรก็ตามเรามาเริ่มต้นด้วยเบราว์เซอร์ที่ทันสมัยแล้วเราจะเห็นวิธีแก้ปัญหาสำหรับเบราว์เซอร์รุ่นเก่า

ลูกศรแบบเลื่อนลงสำหรับ Chrome, Firefox, Opera, Internet Explorer 10+

สำหรับเบราว์เซอร์เหล่านี้คุณสามารถตั้งค่าภาพพื้นหลังเดียวกันสำหรับเมนูแบบเลื่อนลงเพื่อให้มีลูกศรเหมือนกัน

ในการทำเช่นนั้นคุณต้องรีเซ็ตรูปแบบเริ่มต้นของเบราว์เซอร์สำหรับselectแท็กและตั้งกฎพื้นหลังใหม่ (เหมือนที่แนะนำก่อนหน้านี้)

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

appearanceกฎมีการกำหนดให้ไม่มีการรีเซ็ตคนที่เบราว์เซอร์เริ่มต้นถ้าคุณต้องการที่จะมีลักษณะที่เหมือนกันสำหรับแต่ละลูกศรคุณควรเก็บไว้ในสถานที่

backgroundกฎในตัวอย่างที่มีการตั้งค่าด้วยภาพแบบอินไลน์ SVG ที่เป็นตัวแทนของลูกศรที่แตกต่างกัน ตำแหน่งเหล่านี้อยู่ในตำแหน่ง 98% จากซ้ายเพื่อให้ขอบบางส่วนไปยังเส้นขอบด้านขวา (คุณสามารถปรับเปลี่ยนตำแหน่งได้อย่างง่ายดายตามที่คุณต้องการ)

เพื่อรักษาลักษณะการทำงานข้ามเบราว์เซอร์ที่ถูกต้องกฎอื่น ๆ ที่จะต้องถูกทิ้งไว้คือ outline . กฎนี้จะรีเซ็ตเส้นขอบเริ่มต้นที่ปรากฏขึ้น (ในบางเบราว์เซอร์) เมื่อองค์ประกอบถูกคลิก กฎอื่น ๆ ทั้งหมดสามารถแก้ไขได้อย่างง่ายดายหากจำเป็น

ลูกศรดรอปดาวน์สำหรับ Internet Explorer 8 (IE8) และ Internet Explorer 9 (IE9) โดยใช้ Icon Font

นี่เป็นส่วนที่ยากกว่า ... หรืออาจจะไม่

ไม่มีกฎมาตรฐานในการซ่อนลูกศรเริ่มต้นสำหรับเบราว์เซอร์เหล่านี้ (เช่นselect::-ms-expandสำหรับ IE10 +) วิธีแก้ปัญหาคือซ่อนส่วนของเมนูแบบเลื่อนลงที่มีลูกศรเริ่มต้นและแทรกแบบอักษรไอคอนลูกศร (หรือ SVG ถ้าคุณต้องการ) ที่คล้ายกับ SVG ที่ใช้ในเบราว์เซอร์อื่น ๆ (ดูselectกฎ CSS สำหรับข้อมูลเพิ่มเติม รายละเอียดเกี่ยวกับ SVG แบบอินไลน์ที่ใช้)

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

หลังจากนั้นทุก ๆselectใน HTML จะต้องถูกรวมไว้ด้วยdiv(หรือแท็กอะไรก็ได้ที่สามารถตัดองค์ประกอบได้) ที่ Wrapper นี้ให้เพิ่มคลาสที่มีฟอนต์ไอคอน

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

กล่าวง่ายๆคือกระดาษห่อหุ้มนี้ใช้เพื่อจำลองไฟล์ selectแท็ก

ในการทำหน้าที่เหมือนดร็อปดาวน์ Wrapper ต้องมีเส้นขอบเพราะเราซ่อนอันที่มาจากไฟล์select.

สังเกตว่าเราไม่สามารถใช้selectเส้นขอบได้เนื่องจากเราต้องซ่อนลูกศรเริ่มต้นที่ยาวกว่ากระดาษห่อ 25% ดังนั้นจึงไม่ควรมองเห็นเส้นขอบด้านขวาเพราะเราซ่อนอีก 25% โดยoverflow: hiddenกฎที่ใช้กับselectตัวมันเอง

ไอคอน - ฟอนต์ลูกศรที่กำหนดเองจะถูกวางไว้ในคลาสหลอก:beforeที่กฎcontentมีการอ้างอิงสำหรับลูกศร (ในกรณีนี้คือวงเล็บด้านขวา)

นอกจากนี้เรายังวางลูกศรนี้ในตำแหน่งที่แน่นอนเพื่อให้อยู่กึ่งกลางมากที่สุด (หากคุณใช้แบบอักษรไอคอนอื่นอย่าลืมปรับให้เหมาะสมโดยเปลี่ยนค่าด้านบนและด้านซ้ายและขนาดแบบอักษร)

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

คุณสามารถสร้างและแทนที่ลูกศรพื้นหลังหรือลูกศรแบบอักษรของไอคอนได้อย่างง่ายดายโดยทุกอันที่คุณต้องการเพียงแค่เปลี่ยนในbackground-imageกฎหรือสร้างไฟล์ฟอนต์ไอคอนใหม่ด้วยตัวเอง

ในกรณีที่คุณต้องการใช้คลาสและคลาสหลอก:

.simple-control คือคลาส css ของคุณ

:disabled เป็นคลาสหลอก

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}