ฉันจะจัดสไตล์แบบเลื่อนลง <select> ด้วย CSS เท่านั้นได้อย่างไร


1333

มีวิธี CSS-only ในการกำหนดสไตล์ของ<select>ดรอปดาวน์หรือไม่?

ฉันต้องมีสไตล์ <select>รูปแบบให้มากที่สุดเท่าที่จะเป็นไปได้โดยมนุษย์ คุณสมบัติอะไรที่ฉันสามารถใช้ใน CSS ได้?

รหัสนี้จะต้องเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด:

  • Internet Explorer 6, 7 และ 8
  • Firefox
  • การแข่งรถวิบาก

ฉันรู้ว่าฉันทำได้ด้วย JavaScript: ตัวอย่างตัวอย่าง

และฉันไม่ได้พูดถึงสไตล์ที่เรียบง่าย ฉันอยากรู้ว่าอะไรที่ดีที่สุดที่เราสามารถทำได้กับ CSS เท่านั้น

ฉันพบคำถามที่คล้ายกันใน Stack Overflow

และอันนี้ใน Doctype.com


1
ไม่มีอะไรมากพบใน google แก้ปัญหา js เพียง แต่จะมี
Jitendra Vyas

41
ฉันรู้สึกว่ามันเป็นคำถามที่ถูกกฎหมาย แต่คำตอบคือ "ไม่ไม่ใช่จริง ๆ " หรือ "ไม่ใช่วิธีที่คุณต้องการ" แต่ไม่มีใคร (ไม่ใช่ฉัน) มั่นใจได้ 100% เกี่ยวกับมันความรู้สึกคลุมเครือนี้คลานอยู่ใต้ผิวหนังของผู้อ่านและความถูกต้องของคำถามจะได้รับการตั้งคำถาม
ZJR

1
@Jitendra ฉันรู้ว่าสิ่งที่คุณได้รับ เราชอบถ้าคุณทำให้คำถามของคุณชัดเจนยิ่งขึ้น นอกจากนี้ฉันคิดว่าฉันพบสิ่งที่คุณอาจมองหา นี่คือการทดลอง แต่ลองดู: cappuccino.org/aristo/showcase
jeremyosborne

1
@jeremyosborne - ขอบคุณสำหรับการตอบกลับ ฉันรู้ว่าฉันสามารถทำได้ด้วย javascript ลิงก์ eaxmple ของคุณอ้างอิงจาก JS ทำไมฉันถามคำถามนี้เพราะฉันต้องการที่จะรู้ว่ามีใครรู้เกี่ยวกับสิ่งที่ดีที่สุดที่เราสามารถทำได้กับ css เท่านั้น
Jitendra Vyas

@Jitendra ขอบคุณที่อัปเดตคำถามของคุณ สิ่งที่ดีที่สุดที่คุณสามารถทำได้กับข้อ จำกัด ที่คุณมี (CSS เท่านั้นและไม่มี JS) คือการปรับเปลี่ยนแบบอักษร (แบบอักษร) พื้นหลังและพื้นหน้า (ข้อความ) ขนาดชายแดนขนาดลักษณะและสีตำแหน่งและขนาด (โดยทั่วไปผ่านประเภท การตั้งค่าผ่านแบบอักษร) ถึงอย่างนั้นคุณอาจต้องปรับแต่งเล็กน้อยเพื่อให้แน่ใจว่าทุกอย่างดูเหมือนกันในทุกเบราว์เซอร์ ฉันหวังว่าฉันจะรู้คำตอบที่ดีกว่านั้นและบางทีอาจมีคำตอบที่ฉันพลาด แต่ฉันก็ไม่คิดอย่างนั้น
jeremyosborne

คำตอบ:


1027

นี่คือสามโซลูชั่น:

โซลูชัน # 1 - ลักษณะที่ปรากฏ: ไม่มี - ด้วย Internet Explorer 10 - 11 วิธีแก้ปัญหา ( สาธิต )

-

หากต้องการซ่อนชุดลูกศรเริ่มต้นappearance: noneในองค์ประกอบที่เลือกจากนั้นเพิ่มลูกศรที่คุณกำหนดเองด้วยbackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

การสนับสนุนเบราว์เซอร์:

appearance: noneมีการสนับสนุนเบราว์เซอร์ที่ดีมาก ( caniuse ) - ยกเว้น Internet Explorer 11 (และใหม่กว่า) และ Firefox 34 (และใหม่กว่า)

เราสามารถปรับปรุงเทคนิคนี้และเพิ่มการสนับสนุนสำหรับ Internet Explorer 10 และ Internet Explorer 11 โดยการเพิ่ม

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

หาก Internet Explorer 9 เป็นข้อกังวลเราไม่มีวิธีลบลูกศรเริ่มต้น (ซึ่งหมายความว่าตอนนี้เราจะมีลูกศรสองอัน) แต่เราสามารถใช้ตัวเลือก Internet Explorer 9 ที่ขี้ขลาดได้

ถึงอย่างน้อยเลิกทำลูกศรที่กำหนดเองของเรา - ปล่อยให้ลูกศรเลือกเริ่มต้นยังคงอยู่

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

ทั้งหมดเข้าด้วยกัน:

โซลูชันนี้ง่ายและมีการสนับสนุนเบราว์เซอร์ที่ดี - โดยทั่วไปควรจะเพียงพอ


หากเบราว์เซอร์รองรับ Internet Explorer 9 (และใหม่กว่า) และ Firefox 34 (และใหม่กว่า) จำเป็นต้องอ่านต่อ ...

โซลูชัน # 2 ตัดส่วนที่เลือกเพื่อซ่อนลูกศรเริ่มต้น ( สาธิต )

-

(อ่านเพิ่มเติมได้ที่นี่)

ล้อมรอบselectองค์ประกอบใน div ด้วยความกว้างคงที่และoverflow:hiddenและ

จากนั้นให้selectองค์ประกอบมีความกว้างประมาณ20 พิกเซลมากกว่า divdiv

ผลลัพธ์คือลูกศรดรอปดาวน์เริ่มต้นของselectองค์ประกอบจะถูกซ่อน (เนื่องจากoverflow:hiddenบนคอนเทนเนอร์) และคุณสามารถวางภาพพื้นหลังใด ๆ ที่คุณต้องการทางด้านขวาของ div

ประโยชน์ของวิธีการนี้คือว่ามันเป็นเบราว์เซอร์ (Internet Explorer 8 และต่อมาWebKitและตุ๊กแก ) อย่างไรก็ตามข้อเสียของวิธีการนี้คือตัวเลือกแบบหล่นลงยื่นออกทางด้านขวา (โดย 20 พิกเซลที่เราซ่อน ... เนื่องจากองค์ประกอบตัวเลือกใช้ความกว้างขององค์ประกอบที่เลือก)

ป้อนคำอธิบายภาพที่นี่

[ควรสังเกตว่าถ้าองค์ประกอบการเลือกกำหนดเองมีความจำเป็นสำหรับอุปกรณ์มือถือ - ดังนั้นปัญหาข้างต้นใช้ไม่ได้ - เนื่องจากวิธีการที่โทรศัพท์แต่ละเครื่องเปิดองค์ประกอบการเลือก ดังนั้นสำหรับมือถือนี่อาจเป็นทางออกที่ดีที่สุด]


หากจำเป็นต้องใช้ลูกศรที่กำหนดเองใน Firefox - ก่อนหน้าเวอร์ชัน 35 - แต่คุณไม่จำเป็นต้องรองรับ Internet Explorer เวอร์ชันเก่า - โปรดอ่านต่อไป ...

โซลูชัน # 3 - ใช้pointer-eventsคุณสมบัติ ( สาธิต )

-

(อ่านเพิ่มเติมได้ที่นี่)

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

ข้อได้เปรียบ:มันทำงานได้ดีใน WebKit และ Gecko มันก็ดูดีเช่นกัน (ไม่มีการแยกoptionองค์ประกอบออก)

ข้อเสีย: Internet Explorer (Internet Explorer 10 ขึ้นไป) ไม่รองรับpointer-eventsซึ่งหมายความว่าคุณไม่สามารถคลิกลูกศรที่กำหนดเองได้ นอกจากนี้ข้อเสียอื่น ๆ (ชัดเจน) ด้วยวิธีนี้คือคุณไม่สามารถกำหนดเป้าหมายรูปลูกศรใหม่ด้วยเอฟเฟกต์โฮเวอร์หรือเคอร์เซอร์มือได้เนื่องจากเราเพิ่งปิดใช้งานกิจกรรมตัวชี้บนพวกเขา!

อย่างไรก็ตามด้วยวิธีนี้คุณสามารถใช้ Modernizer หรือความคิดเห็นตามเงื่อนไขเพื่อทำให้ Internet Explorer กลับไปเป็นลูกศรมาตรฐานในตัว

หมายเหตุ:การที่ Internet Explorer 10 ไม่สนับสนุนconditional commentsอีกต่อไป: ถ้าคุณต้องการที่จะใช้วิธีการนี้คุณอาจจะใช้Modernizr แต่ก็ยังคงเป็นไปได้ที่จะไม่รวม CSS ชี้เหตุการณ์จาก Internet Explorer 10 ด้วย CSS สับอธิบายที่นี่


1
วิธีไหนดีที่สุดสำหรับคุณจาก 2 วิธีนี้?
Jitendra Vyas

3
มันขึ้นอยู่กับข้อกำหนดการออกแบบ หากคุณเห็นด้วยกับการเลื่อนลง - นั่นเป็นสิ่งที่ดีที่สุดเพราะมันเป็นเบราว์เซอร์ข้าม (เบราว์เซอร์ IMO + IE8 + อาจถือเป็นเบราว์เซอร์ข้าม) แต่ฉันคิดว่าหลายคน - สิ่งนี้จะไม่เกิดขึ้น ดังนั้นในงบของฉันข้างต้นฉันหมายความว่า aprroach # 2 ดีที่สุด
Danield

4
นอกจากนี้ซอที่ฉันโพสต์ใช้วิธีการ # 2 กับคำสั่งแบบมีเงื่อนไขเพื่อให้ IE ใช้ลูกศรเริ่มต้น
Danield

3
@AlexisLeclerc แก้ไข div และเลือกความกว้างเดียวกันใช้งานได้เฉพาะในเบราว์เซอร์ -webkit เช่น Chrome (เพราะฉันรวมกฎ - webkit-Appearance: none; ) แต่สิ่งนี้ไม่ทำงานในเบราว์เซอร์อื่น ๆ เช่น firefox
Danield

4
ถ้าฉันอาจเสนอการปรับปรุงสำหรับวิธีที่ # 1 ฉันพบว่าการขาดเส้นขอบหรือขาดการเลือกรัศมีไปทางด้านขวาน่ารำคาญมาก ฉันปรับปรุงซอของคุณกับสิ่งที่ฉันใช้ในโครงการปัจจุบันของฉัน: jsfiddle.net/YvCHW/1745 บอกสิ่งที่คุณคิดว่า!
Alexis Leclerc

233

เป็นไปได้ แต่น่าเสียดายที่ส่วนใหญ่ในเบราว์เซอร์ที่ใช้ WebKit เท่าที่เราในฐานะนักพัฒนาต้องการ นี่คือตัวอย่างของ CSS สไตล์ที่รวบรวมจากแผงตัวเลือกของ Chrome ผ่านตัวตรวจสอบเครื่องมือสำหรับนักพัฒนาที่ได้รับการปรับปรุงเพื่อให้ตรงกับคุณสมบัติ CSS ที่ได้รับการสนับสนุนในปัจจุบันในเบราว์เซอร์ที่ทันสมัยที่สุด:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

เมื่อคุณเรียกใช้รหัสนี้ในหน้าใด ๆ ภายในเบราว์เซอร์ที่ใช้ WebKit ควรเปลี่ยนลักษณะที่ปรากฏของกล่องที่เลือกเอาลูกศร OS มาตรฐานและเพิ่มลูกศร PNG ใส่ระยะห่างก่อนและหลังฉลากเกือบทุกอย่างที่คุณต้องการ

ส่วนที่สำคัญที่สุดคือappearanceคุณสมบัติซึ่งเปลี่ยนวิธีการทำงานขององค์ประกอบ

มันทำงานได้อย่างสมบูรณ์ในเบราว์เซอร์ที่ใช้ WebKit เกือบทั้งหมดรวมถึงเบราว์เซอร์มือถือแม้ว่า Gecko จะไม่สนับสนุนappearanceเช่นเดียวกับ WebKit แต่ดูเหมือนว่า


4
สวัสดีฉันสังเกตเห็นว่ากล่องที่เลือกเริ่มดูแตกต่างจาก Firefox 12 มาก (ดูเหมือนเป็น Chrome (ฉันมี Mac)) และดูเหมือนว่า FF 12 จะสนับสนุนคุณลักษณะที่ปรากฏมากขึ้น
CWSpear

3
วิธีการแก้ปัญหาเฉพาะโครเมี่ยม ... ฉันจะไม่จ่ายสำหรับสิ่งนี้หรือลูกค้าของฉัน ดูคำตอบของ @ Dianeld สำหรับโซลูชัน x-browser
Adrien เป็น

41
@AdrienBe โซลูชันของฉันถูกเสนอมาเกือบ 3 ปีแล้ว ในขณะนั้นเป็นวิธีเดียวที่เหมาะสมในการเลือกกล่องที่เลือกโดยไม่เกี่ยวข้องกับ libs หรือปลั๊กอินของ JavaScript มันยังคงใช้งานได้หากคุณตัดสินใจที่จะวางแอตทริบิวต์นำหน้า แต่ทำงานได้อย่างน่าเชื่อถือเฉพาะในเบราว์เซอร์ที่ใช้ Webkit (เช่น Safari, Opera + Android ใหม่ด้วย) ตอนนี้อาจมีวิธีแก้ปัญหาที่ดีกว่าดังนั้นแทนที่จะเพิ่มความคิดเห็นที่ไร้ความหมายเพียงลงคะแนนให้กับโซลูชันที่คุณเห็นว่าดีขึ้นและในอนาคตให้ตรวจสอบวันที่ "ตอบ" ขอบคุณ
Matthew Morek

4
@ MatthewthMorek: มีทางออกที่ดีกว่าแม้กระทั่ง 3 ปีที่ผ่านมา คำตอบของ Daniel นั้นดีขึ้นมากเกี่ยวกับการรองรับข้ามเบราว์เซอร์ (รองรับ IE8 และใหม่กว่า, WebKit และ Gecko) คำถามได้ถามว่า "รหัสต้องเข้ากันได้กับเบราว์เซอร์หลักทั้งหมด: Internet Explorer 6,7 และ 8, Firefox & Safari" ความต้องการ x- เบราว์เซอร์นี้อาจถูกเพิ่มโดย Paul Sweatte ในปี 2013 แม้ว่า ... ขออภัยหากเป็นกรณีนี้
Adrien เป็น

3
ถ้าคุณเพิ่มtext-indent: 0.01px; text-overflow: "";มันจะทำงานได้ดียิ่งขึ้น
อีวาน

64

องค์ประกอบที่เลือกและคุณสมบัติแบบเลื่อนลงของมันเป็นเรื่องยากที่จะสไตล์

คุณลักษณะสไตล์สำหรับองค์ประกอบที่เลือกโดย Chris Heilmann ยืนยันสิ่งที่ Ryan Dohery พูดในข้อคิดเห็นเพื่อคำตอบแรก:

"องค์ประกอบที่เลือกเป็นส่วนหนึ่งของระบบปฏิบัติการไม่ใช่เบราว์เซอร์โครมดังนั้นจึงไม่น่าเชื่อถือในการจัดวางและไม่จำเป็นต้องลองอีกต่อไป"


47

ฉันมีปัญหาตรงนี้ยกเว้นฉันไม่สามารถใช้รูปภาพและไม่ถูก จำกัด โดยการสนับสนุนเบราว์เซอร์ นี่ควรเป็น«กับข้อมูลจำเพาะ»และด้วยโชคเริ่มทำงานได้ทุกที่ในที่สุดในที่สุด

มันใช้เลเยอร์พื้นหลังแบบหมุนวนเพื่อ«ตัดออก»ลูกศรแบบเลื่อนลงเนื่องจากองค์ประกอบแบบหลอกจะไม่ทำงานสำหรับองค์ประกอบที่เลือก

แก้ไข:ในเวอร์ชันอัปเดตนี้ฉันใช้ตัวแปร CSS และระบบเล็ก ๆ เหล่านั้น

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}
<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>


5
ว้าวนี่เป็นหนึ่งในโซลูชั่นที่ยอดเยี่ยมที่สุดที่ฉันเคยเห็น มันใช้งานได้สำหรับฉันใน Chrome และ Safari เวอร์ชันล่าสุดบน Mac เบราว์เซอร์อื่น ๆ
Tintin81

2
ใช้งานได้กับฉันใน firefox ด้วยการเพิ่ม-moz-appearance: none;
Zac

45

ความไม่ลงรอยกันที่ใหญ่ที่สุดที่ฉันสังเกตเห็นเมื่อเลือกสไตล์ดรอปดาวน์คือSafariและการแสดงผลGoogle Chrome (Firefox สามารถปรับแต่งได้อย่างสมบูรณ์ผ่าน CSS) หลังจากค้นหาบางอย่างผ่านความลึกที่คลุมเครือของอินเทอร์เน็ตฉันเจอสิ่งต่อไปนี้ซึ่งเกือบจะช่วยแก้ไข qualms ของฉันด้วย WebKit:

แก้ไข Safari และ Google Chrome :

select {
  -webkit-appearance: none;
}

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

* ข้อมูลเพิ่มเติมและตัวแปรอื่น ๆ ที่มีอยู่ในคุณสมบัติ CSS: -webkit


1
อย่าลืมเพิ่มสไตล์ของคุณหลังจากนั้น;) แต่ฉันดีใจมากที่ฉันอ่านความคิดเห็นนี้วันนี้
teewuane

1
คุณช่วยอธิบายรายละเอียดเกี่ยวกับคำสั่งของคุณได้ไหม: "Firefox สามารถปรับแต่งได้อย่างสมบูรณ์ผ่าน CSS" สำหรับฉันดูเหมือนว่า firefox ไม่สนับสนุนคุณสมบัติที่ปรากฏ ... ดังนั้นสิ่งนี้จะเกิดขึ้นใน Firefox ได้อย่างไร
Danield

36

<select>แท็กสามารถจัดรูปแบบผ่าน CSS เช่นเดียวกับองค์ประกอบ HTML อื่น ๆ ในหน้า HTML ที่แสดงในเบราว์เซอร์ ด้านล่างเป็นตัวอย่าง (เรียบง่ายเกินไป) ที่จะวางตำแหน่งองค์ประกอบที่เลือกในหน้าและแสดงข้อความของตัวเลือกเป็นสีน้ำเงิน

ตัวอย่างไฟล์ HTML (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

ตัวอย่างไฟล์ CSS (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

30
น่าประหลาดใจครั้งแรกที่ฉันเห็น "คุณแม่" มีส่วนเกี่ยวข้องกับอินเทอร์เน็ตโดยที่ไม่ต้องรู้สึกหยาบคาย +1 สำหรับสิ่งนั้น!
BaL

34
คำตอบนี้ไม่ได้แก้คำถามนี้ มีเพียงสไตล์ที่เลือกอินพุต แต่ไม่ใช่ดรอปดาวน์
Kyborek

14
คำตอบนี้ไม่สนใจความท้าทายทั้งหมดในการจัดทำรายการแบบหล่นลงสำหรับความสอดคล้องของเบราว์เซอร์ข้าม นี่เป็นคำตอบที่พยายามน้อยมาก
BentOnCoding

18

โพสต์บล็อกวิธีการสไตล์ CSS แบบหล่นลงสไตล์ JavaScript ไม่ทำงานสำหรับฉัน แต่มันล้มเหลวในOperaแม้ว่า:

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>


17

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

ตัวอย่างการทำงาน: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}
<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>


16

ผมได้กับกรณีของคุณโดยใช้เงินทุน นี่เป็นวิธีที่ง่ายที่สุดที่ใช้งานได้:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

หมายเหตุ: สิ่งที่ base64 อยู่fa-chevron-downใน SVG


12

ในเบราว์เซอร์ที่ทันสมัยมันค่อนข้างเจ็บปวดในสไตล์<select>ใน CSS ด้วยappearance: noneส่วนที่ยุ่งยากเท่านั้นคือการแทนที่ลูกศร (ถ้านั่นคือสิ่งที่คุณต้องการ) นี่คือโซลูชันที่ใช้data:URI แบบอินไลน์กับ SVG แบบข้อความล้วน:

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}
<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

ส่วนที่เหลือของการจัดแต่งทรงผม (เส้นขอบการขยายสี ฯลฯ ) นั้นค่อนข้างตรงไปตรงมา

สิ่งนี้ใช้ได้กับทุกเบราว์เซอร์ที่ฉันเพิ่งลอง (Firefox 50, Chrome 55, Edge 38 และ Safari 10) สิ่งหนึ่งที่ทราบเกี่ยวกับ Firefox คือถ้าคุณต้องการใช้#ตัวละครใน data URI (เช่นfill: #000) คุณต้องหลบหนี ( fill: %23000)


1
นอกจากนี้คุณยังสามารถขนาด SVG ที่มีheightและ / หรือwidthแอตทริบิวต์ในแท็กแทนของสถานที่ให้บริการแบบ<svg> CSS background-size
gitaarik

10
select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

ไม่สามารถเลือกอะไรก็ได้ด้วย Chrome ปัจจุบัน
Vitaly Zdanevich

9

กำหนดเองเลือกสไตล์ CSS

ทดสอบในInternet Explorer (10 และ 11), Edge, Firefox และ Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}
<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>


ปรับได้มากขึ้นเล็กน้อย (แต่ไม่ได้ทดสอบในเบราว์เซอร์ทั้งหมด):background-position: right 15px center, right 10px center;
Robin Stewart

8

ใช้clipคุณสมบัติเพื่อครอบตัดขอบและลูกศรของselectองค์ประกอบจากนั้นเพิ่มสไตล์การแทนที่ของคุณเองลงในกระดาษห่อ:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

ใช้ตัวเลือกที่สองโดยไม่มีค่าศูนย์เพื่อให้ปุ่มคลิกได้:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

พิกัดแตกต่างกันระหว่าง Webkit และเบราว์เซอร์อื่น แต่เคียวรี @mediaสามารถครอบคลุมได้

อ้างอิง


1
ทำงานได้ดีสำหรับฉันอย่างน้อยก็ใน Chrome: ตำแหน่ง: สัมบูรณ์; คลิป: rect (2px 85px 128px 2px); ดัชนี z: 2; padding-left: 18px; แพ็ดดิงขวา: 18px; กำไร: อัตโนมัติ 7px; สี: # 555; ขนาดตัวอักษร: สืบทอด; สีพื้นหลัง: โปร่งใส
BrianFreud

1
ฉันพบว่าการครอบตัดลูกศรทำงานเพียงครึ่งเดียวใน IE7 เนื่องจากคุณไม่สามารถควบคุมขอบของตัวเลือกได้
CpILL

1
เพิ่มฟังก์ชันการคลิกเป็นส่วนหนึ่งของคำถามที่เกี่ยวข้อง
Paul Sweatte

1
@ PaulSweatte ว้าวนี่เป็นหมอผีคนที่ 20ของคุณ! ยินดีด้วย. นอกจากนี้คุณยังยอดคำสั่งของฉันทั้งหมดสำหรับป้ายหมอผีทอง
Nemo

5

ตัวอย่างที่ดีมากที่ใช้:afterและ:beforeทำเคล็ดลับอยู่ในStyling Select Box ด้วย CSS3 | CSSDeck


1
ใช่ แต่ความต้องการที่สงสัยนั้นควรเข้ากันได้กับ Internet Explorer 6,7 และ 8
Jitendra Vyas

2
ใช่มันเข้ากันไม่ได้กับ IE แต่ฉันชอบที่จะแบ่งปันให้ใครก็ตามที่กำลังมองหาทางออกที่ทันสมัยเหมือนที่ฉันกำลังมองหา
Ahmad Ajmi

5

ไม่แนะนำให้แก้ไของค์ประกอบนี้ แต่ถ้าคุณต้องการลองมันก็เหมือนกับองค์ประกอบ HTML อื่น ๆ

แก้ไขตัวอย่าง:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}
<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

2
@MikkoP: เมื่อแนะนำการแก้ไขคุณจะโปรดให้ข้อมูลสรุปการแก้ไขที่มีความหมายมากขึ้นหรือไม่ "ปรับปรุงข้อความ" ไม่เป็นประโยชน์อย่างมากเนื่องจากบทสรุประดับสูงสำหรับผู้ตรวจสอบของเรา ขอบคุณ
Jean-François Corbett

1
@ Jean-FrançoisCorbettฉันจะพยายามที่จะเฉพาะเจาะจงมากขึ้น :)
MikkoP

1
คุณไม่สามารถจัดองค์ประกอบองค์ประกอบตัวเลือก (ดูคำตอบ SO นี้: stackoverflow.com/a/7208814/703717 )
Danield

4
label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

ใช้สีพื้นหลังสำหรับองค์ประกอบที่เลือกและฉันลบภาพออก ..


4

ใช่. คุณสามารถจัดสไตล์องค์ประกอบ HTML ตามชื่อแท็กดังนี้:

select {
  font-weight: bold;
}

แน่นอนคุณยังสามารถใช้คลาส CSS เพื่อจัดสไตล์ได้เช่นเดียวกับองค์ประกอบอื่น ๆ :

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

6
ฉันไม่ได้พูดคุยเกี่ยวกับเช่นนี้ฉันต้องการที่จะเปลี่ยนลูกศรเลื่อนไปเป็นอย่างอื่น
Jitendra Vyas

5
คุณไม่สามารถจัดสไตล์ลูกศรดร็อปดาวน์ไปยังรูปภาพอื่นซึ่งควบคุมโดยระบบปฏิบัติการ หากคุณต้องการจริงๆทางออกที่ดีที่สุดของคุณคือใช้วิดเจ็ตดรอปดาวน์ DHTML
ไรอันโดเฮอร์ตี้

3
คุณสามารถเปลี่ยนคุณสมบัติ CSS ผ่าน CSS เท่านั้น คุณสามารถเปลี่ยนระยะขอบระยะห่างคุณสมบัติแบบอักษรพื้นหลังสี ฯลฯ หากคุณต้องการทำให้มันดูแตกต่างอย่างสิ้นเชิงโดยทั่วไปคุณต้องแทนที่ด้วยกราฟิกที่รันไทม์ผ่าน JavaScript (ซึ่งไม่ใช่วิธีที่ดีถ้าทำได้ดี )
เดฟวอร์ด

4

นี่คือวิธีการแก้ปัญหาตามความคิดที่ฉันโปรดปรานจากการสนทนานี้ สิ่งนี้ช่วยให้การจัดแต่งทรงผมเป็นองค์ประกอบ <select> โดยตรงโดยไม่ต้องมาร์กอัปใด ๆ เพิ่มเติม

ใช้งานได้กับ Internet Explorer 10 (และใหม่กว่า) ด้วยทางเลือกที่ปลอดภัยสำหรับ Internet Explorer 8/9 ข้อแม้หนึ่งสำหรับเบราว์เซอร์เหล่านี้คือภาพพื้นหลังจะต้องวางตำแหน่งและมีขนาดเล็กพอที่จะซ่อนอยู่ด้านหลังส่วนขยายการควบคุมเนทิฟ

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

CodePen

http://codepen.io/ralgh/pen/gpgbGx


3

ตั้งแต่ Internet Explorer 10 คุณสามารถใช้::-ms-expandตัวเลือกองค์ประกอบปลอมเพื่อจัดวางสไตล์และซ่อนองค์ประกอบลูกศรแบบหล่นลง

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

สไตล์ที่เหลือควรคล้ายกับเบราว์เซอร์อื่น

นี่คือทางแยกพื้นฐานของ jsfiddle ของ Danield ที่ใช้การสนับสนุนสำหรับ IE10


3

มีวิธีง่าย ๆ

ตรวจสอบซอนี้และให้อภัยฉัน overstyling: https://jsfiddle.net/dkellner/7ac9us70/

เคล็ดลับที่อยู่เบื้องหลัง: ทันทีที่แท็ก <select> ได้รับคุณสมบัติที่เรียกว่า "ขนาด" มันจะทำงานเป็นรายการที่มีความสูงคงที่และทันใดนั้นด้วยเหตุผลบางอย่างทำให้คุณสามารถกำหนดสไตล์ของนรกได้ ตอนนี้พูดอย่างเคร่งครัดรายการคงที่เป็นผลข้างเคียง - แต่มันช่วยให้เรามากขึ้นเพราะเราใช้มันเพื่อ "ดูแบบหล่นลง"

ตัวอย่างที่น้อยที่สุด:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(เพื่อให้ง่ายฉันทำกับ jQuery - แต่คุณสามารถทำได้โดยไม่ได้)

หมายเหตุด้านข้าง

  • โซลูชันนี้ให้คุณมากกว่าตัวเลือก: ค่าสามารถแก้ไขได้ด้วยตนเอง ใช้คุณสมบัติอ่านอย่างเดียวหากคุณต้องการวิธี จำกัด การเลือกโดยค่าเริ่มต้น

  • จัดแต่งทรงผมเพื่อเพิ่มความเป็นไปได้ <optgroup> แท็กยังไม่ได้รอบเด็กของพวกเขาที่พวกเขากำลังย้ายก่อนพวกเขา มันเป็นความตั้งใจมันชัดเจนมากขึ้นและพวกเขามีความสุขที่ได้ทำงานเช่นนี้ไม่ต้องกังวล

  • Javascripts: ใช่ฉันรู้ว่า OP พูดว่า "no Javascript" แต่ฉันเข้าใจเพราะ อย่ารบกวนปลั๊กอินซึ่งใช้ได้ คุณไม่ต้องการห้องสมุดใด ๆ สำหรับสิ่งนี้ ไม่ใช่ jQuery อย่างที่ฉันพูดมันเป็นเพียงตัวอย่างที่ชัดเจน


2

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


2

นอกจากนี้คุณยังสามารถเพิ่มสไตล์โฮเวอร์ลงในดรอปดาวน์

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}
<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>


2

วิธีที่สามในคำตอบของ Danieldนั้นสามารถปรับปรุงให้ทำงานกับ hover-effects และเหตุการณ์เมาส์อื่น ๆ เพียงตรวจสอบให้แน่ใจว่า "ปุ่ม" - องค์ประกอบมาทันทีหลังจากองค์ประกอบที่เลือกในมาร์กอัป จากนั้นกำหนดเป้าหมายด้วยตัวเลือก + CSS:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

อย่างไรก็ตามสิ่งนี้จะแสดงเอฟเฟ็กต์โฮเวอร์เมื่อโฮเวอร์ที่ใดก็ได้บนองค์ประกอบที่เลือกไม่ใช่เพียงแค่ปุ่ม ""

ฉันกำลังใช้วิธีการนี้ร่วมกับ Angular (เนื่องจากโครงการของฉันเป็นแอปพลิเคชัน Angular อยู่แล้ว) เพื่อครอบคลุมองค์ประกอบที่เลือกทั้งหมดและให้ Angular แสดงข้อความของตัวเลือกที่เลือกใน "ปุ่ม" - องค์ประกอบ ในกรณีนี้มันสมเหตุสมผลอย่างสมบูรณ์แบบที่จะใช้เอฟเฟ็กต์โฮเวอร์เมื่อวางเมาส์เหนือที่ใดก็ได้ที่เลือก

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


1
ฉันชอบที่จะรู้เหตุผลของการลงคะแนนเสียงใด ๆ ดังนั้นฉันสามารถรู้วิธีการปรับปรุง! 🙂
Adrian Schmidt

1

โซลูชัน CSS และ HTML เท่านั้น

ดูเหมือนว่าเข้ากันได้กับ Chrome, Firefox และ Internet Explorer 11 แต่โปรดแสดงความคิดเห็นของคุณเกี่ยวกับเว็บเบราว์เซอร์อื่น

ตามคำแนะนำของคำตอบของ Danieldฉันเลือกตัวเลือกของฉันใน div (แม้แต่สอง divs สำหรับความเข้ากันได้ของ x-browser) เพื่อให้ได้พฤติกรรมตามที่คาดหวัง

ดู http://jsfiddle.net/bjap2/

HTML:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

สังเกตุว่าแผ่นหุ้ม div สองอัน

นอกจากนี้ยังสังเกตเห็นการเพิ่ม div พิเศษเพื่อวางปุ่มลูกศรลงทุกที่ที่คุณต้องการ (จัดตำแหน่งอย่างแน่นอน) ที่นี่เราวางไว้ทางซ้าย

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.