ฉันจะลบเงาบนองค์ประกอบที่เลือกใน Safari บน Mac ได้อย่างไร

บน Mac และอุปกรณ์ iOS ใน Safari <select>องค์ประกอบที่มีสีพื้นหลังจะทำให้เกิดเงาขึ้นเอง สิ่งนี้ดูเหมือนจะไม่เกิดขึ้นในระบบปฏิบัติการอื่น

ตัวอย่างเช่นฉันมีองค์ประกอบเลือกที่มีคุณสมบัติลักษณะเหล่านี้:

select {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px 6px;
margin: 10px 0 7px;
width: 250px;
background-color: #BD2786;
color: white;
letter-spacing: -.04em;
font-weight: bold;
border: 0;
}

และองค์ประกอบของฉันมีสีพื้นหลังที่ฉันต้องการ แต่ความเงายังคงอยู่ที่นั่น ใครรู้วิธีทำให้เป็นสีแบน ๆ

@beanland; คุณต้องเขียน

-webkit-appearance:none;

ใน css ของคุณ

อ่านhttp://trentwalton.com/2010/07/14/css-webkit-appearance/

การใช้-webkit-appearance:none;จะลบลูกศรที่ระบุว่านี่เป็นรายการแบบเลื่อนลง

ดูตัวอย่างข้อมูลนี้ที่ทำให้ใช้งานได้กับเบราว์เซอร์ต่างๆและเพิ่มลูกศรที่กำหนดเองโดยไม่รวมไฟล์รูปภาพใด ๆ :

select{
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
    /* and then whatever styles you want*/
	height: 30px; 
	width: 100px;
	padding: 5px;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

เวอร์ชัน 2019

URL รูปภาพแบบอินไลน์ที่สั้นกว่าแสดงเฉพาะลูกศรลงสีลูกศรที่ปรับแต่งได้ ...

จากhttps://codepen.io/jonmircha/pen/PEvqPa

ผู้แต่งน่าจะเป็นJonathan MirCha

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%238C98F2'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
  background-size: 12px;
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-color: #efefef;
}

ขออภัยที่ไปกองอยู่กับรายการเก่า ฉันพบคำตอบบางส่วนสำหรับคำถามของฉันที่นี่ แต่ต้องทำงานบางอย่างดังนั้นฉันจึงต้องการแบ่งปันผลลัพธ์ของฉันสำหรับคนต่อไป

ฉันลงเอยด้วยวิธีการเดียวกันกับผู้ร่วมให้ข้อมูลคนอื่น ๆ แต่มีการปรับแต่งเล็กน้อยเพื่อแก้ไขสิ่งต่อไปนี้

1. ข้อความยาวครอบคลุมลูกศรในโซลูชันอื่น ๆ
2. ภาพที่ใช้เป็นลูกศรคำสั่งผสมขึ้น / ลงที่ค่อนข้างเก่าและน่าเกลียด

ด้านล่างนี้จะให้วิธีแก้ปัญหาในการแก้ไขปัญหาข้างต้น หมายเหตุ: ฉันใช้ลูกศรสีขาวสำหรับกรณีการใช้งานของฉันคุณอาจต้องเปลี่ยนสีของลูกศรสำหรับของคุณ

นี่คือตัวอย่าง:

select{    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaWQ9IkxheWVyXzEiICAgZGF0YS1uYW1lPSJMYXllciAxIiAgIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIiAgIHZlcnNpb249IjEuMSIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIgICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE0MjAyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciICAgICBpZD0ibmFtZWR2aWV3NDIwMCIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGlua3NjYXBlOnpvb209Ijg0LjMiICAgICBpbmtzY2FwZTpjeD0iMi40NzQ5OTk5IiAgICAgaW5rc2NhcGU6Y3k9IjUiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMTkyMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIiAvPiAgPGRlZnMgICAgIGlkPSJkZWZzNDE5MCI+ICAgIDxzdHlsZSAgICAgICBpZD0ic3R5bGU0MTkyIj4uY2xzLTJ7ZmlsbDojNDQ0O308L3N0eWxlPiAgPC9kZWZzPiAgPHRpdGxlICAgICBpZD0idGl0bGU0MTk0Ij5hcnJvd3M8L3RpdGxlPiAgPHBvbHlnb24gICAgIGNsYXNzPSJjbHMtMiIgICAgIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIiAgICAgaWQ9InBvbHlnb240MTk4IiAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MSIgLz48L3N2Zz4=) no-repeat 101% 50%;
  padding-right:20px;
}

ตรวจสอบ -webkit- ลักษณะ: ไม่มีและอนุพันธ์ คำอธิบายโดย Chris Coyer ที่นี่: https://css-tricks.com/almanac/properties/a/appearance/

ดังที่ได้กล่าวมาแล้วหลายครั้ง

-webkit-appearance:none;

ยังลบลูกศรซึ่งไม่ใช่สิ่งที่คุณต้องการในกรณีส่วนใหญ่

วิธีแก้ปัญหาง่ายๆที่ฉันพบคือเพียงแค่ใช้select2แทนการเลือก คุณสามารถจัดรูปแบบองค์ประกอบ select2 ใหม่ได้เช่นกันและที่สำคัญที่สุดคือ select2 มีลักษณะเหมือนกันบน Windows, Android, iOS และ Mac

หากคุณตรวจสอบ User Agent StyleSheet ของ Chome คุณจะพบสิ่งนี้

outline: -webkit-focus-ring-color auto 5px;

ในระยะสั้นคุณสมบัติโครงร่าง - ทำให้ไม่มี

ที่ควรลบเรืองแสง