กำลังลบรูปแบบพื้นหลังบนเมนูแบบเลื่อนลงใน Chrome และ Safari หรือไม่

เป็นไปได้ไหมที่จะทำให้พื้นหลังและเส้นขอบของเมนูแบบเลื่อนลงในแบบฟอร์มโปร่งใสใน Chrome และ Safari เราพบว่ามันดูสมบูรณ์แบบใน Firefox และ IE แต่ดูเหมือนว่า Chrome และ Safari ต้องการใช้สไตล์เริ่มต้นของตัวเอง :(

นี่คือโค้ดที่เราใช้ URL พื้นหลังสำหรับ div แรกคือการใช้ลูกศรแบบเลื่อนลงที่เรากำหนดเอง:

<div style="margin-top:-15px;background: url(images/select-arrow.gif) no-repeat right; overflow: hidden; font-family:SwankyandMooMoo; color:#565da4; width:352px;">      
<select name="for" id="for" style="background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">
<option value="ads" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Ads</option>
<option value="other" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Other</option>
</select>
</div>

google-chrome drop-down-menu safari
person Paul    schedule 12.10.2012    source แหล่งที่มา

คำตอบ (2)


arrow_upward
1
arrow_downward

แก้ไข ตอนนี้คำถามได้รับการชี้แจงแล้ว นี่คือ jsfiddle ที่จะทำสิ่งที่คุณต้องการ

http://jsfiddle.net/wnGs8/30/

คุณตั้งค่าภาพพื้นหลังในส่วนที่เลือกและใช้ div wrapper เพื่อซ่อนลูกศรแบบเลื่อนลงจริง

HTML

<div class="dropdown-wrapper">
    <select class="dropdown">
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
        <option>Test 123</option>
    </select>
</div>

ซีเอสเอส

.dropdown-wrapper {
    position: relative;
    overflow: hidden;
    width: 152px; /* width minus 24 */
}
.dropdown {
    font-size: 24px;
    border: none;
    width: 176px;
    background: url('http://whatsnew.googleapps.com/_/rsrc/1299892144226/choose-release-track/arrow_down_blue24.png') no-repeat;
    background-position: 128px 0px; /* width minus 48 */
}
person Louis Ricci    schedule 12.10.2012
comment
คุณกำลังบอกว่าใช้พื้นหลังสืบทอดกับองค์ประกอบที่เลือกใช่ไหม ลองแล้วและดูเหมือนจะไม่ทำงานเช่นกัน โปรดดูโพสต์ต้นฉบับของฉันอีกครั้งในขณะที่ฉันได้อัปเดตด้วยโค้ดที่เราใช้อยู่ - person Paul; 12.10.2012
comment
@Paul - สิ่งที่ฉันเพิ่งโพสต์ใช้งานได้ใน chrome, ff และ ie8 การตั้งค่าภาพพื้นหลังบนการตัด DIV แทน SELECT เองอาจทำให้เกิดปัญหาในการแสดงผลของ Chrome และ Safari - person Louis Ricci; 12.10.2012
comment
ขอบคุณสำหรับการตอบกลับอย่างรวดเร็วและโค้ด แต่ดูเหมือนว่าจะใช้งานไม่ได้เช่นกัน เมื่อตรวจสอบ jsfiddle.net/wnGs8/30 คุณจะเห็นทั้งใน Chrome และ Safari ว่ายังคงมีอยู่ การไล่ระดับสีเทาที่ใช้เป็นพื้นหลังภายใต้ผลลัพธ์ - person Paul; 12.10.2012

arrow_upward
0
arrow_downward

การไม่เห็นโค้ดใดๆ ทำให้ยากต่อการตัดสินคำตอบของคุณ "การแก้ไข" อาจเป็นการใช้รูปภาพ .png ที่มีความทึบแสง 100% เป็นพื้นหลังสำหรับอินพุต นั่นควรจะใช้ได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด

แก้ไขเพื่อตอบกลับความคิดเห็น: ลองใช้ background: transparent; และ border: 0; เนื่องจากเป็นไวยากรณ์ที่ถูกต้องเพื่อให้ได้สิ่งที่คุณต้องการ

นอกจากนี้ แบบอักษรที่กำหนดเองไม่ควรส่งผลกระทบใดๆ เลย ฉันใช้มันตลอดเวลา

สุดท้ายนี้ อาจเป็นไปไม่ได้ด้วยซ้ำกับมาตรฐาน HTML และ CSS ในปัจจุบันของเรา นี่เป็นคำถาม stackoverflow อีกข้อที่เกี่ยวข้องกับคุณ

วิธีจัดสไตล์เมนูแบบเลื่อนลง ‹select› ด้วย CSS โดยไม่มี JavaScript เท่านั้นใช่ไหม

person AJStacy    schedule 12.10.2012
comment
ดูเหมือนว่าเคล็ดลับ png จะไม่ทำงาน ฉันได้อัปเดตโพสต์ดั้งเดิมแล้วเพื่อให้คุณเห็นโค้ดที่เราใช้อยู่ มีลักษณะพิเศษเล็กน้อยเนื่องจากเราใช้แบบอักษรที่กำหนดเองและยังใช้ภาพพื้นหลัง div หลักเพื่อแทนที่ลูกศรแบบเลื่อนลงเริ่มต้น - person Paul; 12.10.2012