การลบมุมที่โค้งมนออกจากองค์ประกอบ <select> ใน Chrome / Webkit

143

สไตล์ชีทผู้ใช้ตัวแทนสำหรับ Chrome ให้รัศมีเส้นขอบ 5px กับทุกมุมของ<select>องค์ประกอบ ฉันพยายามกำจัดสิ่งนี้โดยใช้รัศมี 0px ผ่านสไตล์ชีทภายนอกของฉันรวมทั้งอินไลน์องค์ประกอบเอง ฉันได้ลองทั้งคู่border-radius:0pxแล้ว-webkit-border-radius:0px;และฉันก็พยายามที่เฉพาะเจาะจงกว่านี้border-top-left-radius:0px(รวมถึง -webkit ที่เทียบเท่า)

ไม่มีใครทำงาน

เมื่อฉันตรวจสอบองค์ประกอบในเครื่องมือสำหรับนักพัฒนาของ webkit สไตล์การคำนวณยังคงแสดงรัศมีเป็น 5px แต่ถ้าฉันคลิกที่ลูกศรขยายถัดจากมันเพื่อดูเฉพาะมันอ่าน: element.style - 0px และด้านล่างนั้นจะแสดงข้อกำหนด css ภายนอกที่ฉันได้รับจาก 0px พร้อมกับข้อกำหนดสไตล์ชีทของผู้ใช้ - เอเจนต์ที่ 5px และทั้งสองหลังนี้ถูกขีดฆ่าอย่างที่ควรจะเป็น

ความคิดใด ๆ

select webkit css

— maxedison
แหล่งที่มา

คุณช่วยโพสต์โค้ดได้ไหม ดียิ่งขึ้นถ้าคุณโพสต์โดยใช้ jsfiddle.net

— ngen

1

จริง ๆ แล้วฉันไม่มีเส้นขอบรัศมีเป็นสไตล์เริ่มต้นใน Chrome 10 ใน Win7 อาจเป็นรุ่นอื่นหรือระบบปฏิบัติการ

— Wesley Murch

ไม่มีมุมโค้งมนใน Chrome 12 บน Windows 7 เช่นกัน

— andyb

1

ควรจะกล่าวว่าเป็นใน Mac OS X

— maxedison

244

สิ่งนี้ใช้ได้กับฉัน (สไตล์ที่ปรากฏตัวครั้งแรกไม่ใช่รายการแบบเลื่อนลง):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

— antonj
แหล่งที่มา

179

มีวิธีใดที่จะลบมุมที่โค้งมน แต่ให้ลูกศรชี้ไปทางขวา?

— Adam

3

คุณต้องเพิ่มลูกศรเช่นเป็นภาพพื้นหลังที่มีตำแหน่ง 100% 50% และไม่มีแอตทริบิวต์ซ้ำ ฉันยังใช้ภาพที่เข้ารหัส base64 ใน css เพื่อหลีกเลี่ยงการร้องขอ http เพิ่มเติม

— Karl Adler

26

@ Adam มันใช้งานได้สำหรับฉันถ้าคุณใช้border: 0และเพิ่มเค้าร่างเช่น:outline: 1px inset black; outline-offset:-1px

— Filipe Pereira

1

@FilipePereira Nice ฉันชอบ แต่ฉันจะต้องเพิ่มเค้าร่างการชดเชยออฟไลน์ไม่ได้รับการสนับสนุนโดย IE

— ทิม

6

สิ่งนี้จะกำจัดลูกศรทางด้านขวาซึ่งจะสร้างความเสียหายให้กับประสบการณ์การใช้งานของผู้ใช้ไม่ได้ แต่รูปแบบเลื่อนลงbackground-color: #yourbgและborder-style: noneแล้วสร้าง div โดยตรงก่อนที่จะเลื่อนลงด้วยposition: absoluteและและborder-bottom: 1px solid #youpick display: inlineลูกศรเก็บรักษาไว้ UX ไม่เป็นอันตรายแก้ไขได้ดีขึ้น

— devigner

90

เพียงแค่โซลูชันของฉันพร้อมภาพดรอปดาวน์ (inline svg)

select.form-control {
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
    background-position: 100% 50%;
    background-repeat: no-repeat;
}

ฉันใช้ bootstrap นั่นเป็นสาเหตุที่ฉันใช้select.form-control
คุณสามารถใช้select{หรือselect.your-custom-class{แทน

— Afzal Hossain
แหล่งที่มา

4

นี่เป็นคำตอบเดียวที่แก้ปัญหาของฉันได้ แต่ระวังการใช้ background กับ background-image เนื่องจากสีเติมของ svg จะเขียนทับสีพื้นหลังใด ๆ ที่คุณตั้งไว้สำหรับอินพุตของคุณ

— ลูคัส M

ตกลงโปรดโหวตคำตอบนี้! ฉันไม่เข้าใจคะแนนโหวตอื่นของคำตอบที่ไม่สมบูรณ์ คำแนะนำในการใช้ไอคอน fontawesome แทน inline svg?

— Nicolas Thery

FontAwesome เป็นชุดของไอคอน แต่คุณต้องการเพียงหนึ่งไอคอน ดังนั้นคุณต้องแยกไอคอน FA หนึ่งรายการโดยใช้เครื่องมือบางอย่างเช่น icomoon.io หลังจากนั้นส่งออกไอคอนนั้นเป็นไฟล์ svg หรือ png และลิงก์จาก css ของคุณ

— Afzal Hossain

วิธีแก้ปัญหาที่ดี แต่ในสถานการณ์ของฉันฉันได้เพิ่มสีพื้นหลัง: สีขาว;

— Viktor Bogutskii

อย่างไรก็ตามโปรดทราบเมื่อคุณตั้งค่าwidth: auto;ลูกศร svg ที่เพิ่มเข้ามาจะซ้อนเนื้อหาของการเลือก สิ่งนี้ต้องใช้ช่องว่างภายในเพิ่มเติมทางด้านขวาของ 16px อย่างไรก็ตามการขยายตัวนี้สามารถมองเห็นได้ในทุกเบราว์เซอร์ซึ่งทำลายการออกแบบบนเบราว์เซอร์อื่น ฉันยังไม่มีวิธีแก้ปัญหาสำหรับสิ่งนั้น ...

— Klaas van der Weij

31

หากคุณต้องการเส้นขอบสแควร์และยังคงต้องการลูกศรแผ่เล็ก ๆ ฉันแนะนำสิ่งนี้:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}

— jordan314
แหล่งที่มา

2

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

— Devin McInnis

@ jordan314 ตรวจสอบมุมที่โค้งมนในรูปนี้ เส้นขอบรัศมี: 0; ไม่มีผลกับแท็กที่เลือก อย่างน้อยใน Chrome OSX อยู่ดี

— Jammer

1

@ 7immy แปลกฉันยังใช้ Chrome OS X และนี่คือภาพหน้าจอของซอด้านบนimgur.com/r6ce6Yv

— jordan314

1

@ jordan314 แล้วเรื่องนี้ล่ะ? jsfiddle.net/78xa6qud/2 ฉันเดาว่าเราสามารถหลีกเลี่ยงได้ถ้าพื้นหลังของตัวเลือกและพื้นหลังด้านหลังเป็นสีเดียวกัน

— Jammer

@ 7immy อาใช่ฉันเดาว่าเป็นข้อแม้

— jordan314

7

วิธีแก้ปัญหาที่ดีบางอย่างที่นี่ แต่อันนี้ไม่จำเป็นต้องใช้ SVG รักษาชายแดนผ่านoutlineและตั้งค่าปุ่มบน

select {
  height: 20px;
  -webkit-border-radius: 0;
  border: 0;
  outline: 1px solid #ccc;
  outline-offset: -1px;
}

<select>
 <option>Apple</option>
 <option>Ball</option>
 <option>Cat</option>
</select>

ขยายตัวอย่างข้อมูล

— aleemb
แหล่งที่มา

6

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

วิธีแก้ปัญหาของฉันคือติด div สีขาว (ด้วยเส้นขอบรัศมี: 0px) ด้านหลังตัวเลือก ตั้งค่าตำแหน่งเป็นสัมบูรณ์ความสูงของมันถึงความสูงของตัวเลือกและคุณควรจะไป!

— มาร์ตินรีด
แหล่งที่มา

4

โซลูชันที่มีลูกศรแบบหล่นลงที่กำหนดเองใช้เฉพาะ css เท่านั้น (ไม่มีภาพ)

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;

  -moz-appearance: none;
  display: block;
  padding: 0.3rem;
  height: 2rem;
  width: 100%;
}

<html>

<body>
  <br/>
  <h4>Example</h4>
  <select>
    <option></option>
    <option>Hello</option>
    <option>World</option>
  </select>
</body>

</html>

ขยายตัวอย่างข้อมูล

— Mihai Crăiță
แหล่งที่มา

การวางตำแหน่งพื้นหลังที่ทำงานได้ดีขึ้นสำหรับความต้องการของฉันคือ: background-position: calc(100% - 4px) center, 100% center;นี่เป็นการย้ายลูกศรไปที่ตรงกลางของตัวเลือกและไปทางขวา ขอบคุณมากสำหรับการเริ่มต้นที่ยอดเยี่ยม!

— แบรนดอน

3

วิธีหนึ่งในการทำให้มันเรียบง่ายและหลีกเลี่ยงการยุ่งเหยิงกับลูกศรและคุณสมบัติอื่น ๆ นั้นก็เพื่อเก็บไว้ใน div ด้วยสีพื้นหลังเดียวกันกับแท็กที่เลือก

— Danny Santos
แหล่งที่มา

1

ฉันเห็นด้วยนี่คือวิธีการแก้ปัญหาที่ง่ายที่สุดและน่าเชื่อถือที่สุดและพกพาได้

— John Henckel

1

การกำจัดลูกศรควรหลีกเลี่ยง โซลูชันที่เก็บลูกศรแบบหล่นลงคือการลบสไตล์ออกจากรายการแบบหล่นลง:

.myDropdown {
  background-color: #yourbg;
  border-style: none;
}

จากนั้นสร้าง div โดยตรงก่อนดรอปดาวน์ใน HTML ของคุณ:

<div class="myDiv"></div>
<select class="myDropdown...">...</select>

และสไตล์ div เช่นนี้:

.myDiv {
  background-color: #yourbg;
  border-style: none;
  position: absolute;
  display: inline;
  border: 1px solid #acolor;
}

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

— devigner
แหล่งที่มา

1

สิ่งที่ใส่เข้าไปเงากล่องทำเคล็ดลับ

select{
  -webkit-appearance: none;
  box-shadow: inset 0px 0px 0px 4px;
  border-radius: 0px;
  border: none;
  padding:20px 150px 20px 10px;
}

การสาธิต

— Marco Allori
แหล่งที่มา

0

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

select.regularcolor {
    border-color: rgb(169, 169, 169);
}

select.offcolor {
    border-color: rgb(170, 170, 170);
}

https://jsfiddle.net/hLg70o70/2/

— mcallahan
แหล่งที่มา

อืมไม่แน่ใจเกี่ยวกับ OSX เพิ่งลองใหม่อีกครั้งบน Windows (Chrome เวอร์ชัน 45.0) และยังใช้งานได้ ฉันเดาว่าจะทำให้ปัญหาแปลกยิ่งขึ้นไปอีกมันเป็นแพลตฟอร์มเฉพาะ ...

— mcallahan

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

— ง

0

ดีฉันได้ทางออก หวังว่ามันจะช่วยคุณได้ :)

select{
      border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
      width: 120px;
      height: 36px;
      color: #999;
  }

<select>
  <option value="1">Hi</option>
  <option value="2">Bye</option>
</select>

ขยายตัวอย่างข้อมูล

— Amit
แหล่งที่มา

0

ต่อไปนี้เป็นวิธีการทำ

สร้างภาพพื้นหลังที่ดูเหมือนแบบเลื่อนลง
ปิดลักษณะที่ปรากฏของเบราว์เซอร์
จัดแนวภาพพื้นหลังบนส่วนประกอบที่เลือก

  .control select {  
    border-radius: 0px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("<your image>");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 20px;
  }

— เจอโรมแอนโทนี่
แหล่งที่มา

-1

ฉันใช้วิธีแก้ปัญหาของ jordan314 แต่หลังจากนั้นฉันเพิ่มคลาส "border-light" เพื่อเลือก หากคุณมีคลาสแสงชายแดนเริ่มต้นที่กำหนดไว้ใน css คุณสามารถใช้งานได้โดยตรง มันแค่กำหนดเส้นขอบเป็นสีขาว) ฉันเปลี่ยนเส้นขอบเป็นสี่เหลี่ยมจัตุรัส / ลบรัศมีและดูแลลูกศร

นี่คือสิ่งที่ฉันทำ:

<select class="form-control border border-light" id="type">
   <option>Select</option>
   <option value="mobile">Apple</option>
 </select>

หากคุณไม่มีไฟชายแดนที่กำหนดไว้ล่วงหน้าเพียงเพิ่มใน css ของคุณ:

<style>
.border-light{
         border-color:#f8f9fa!important
     }

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>

— Sitti Munirah Abdul Razak
แหล่งที่มา

-8

Firefox: 18

.squaredcorners {
    -moz-appearance: none;
}

— David forstner
แหล่งที่มา

คำถามเกี่ยวกับ Chrome / Webkit

— zishe

-10

ตั้งค่า CSS เป็น

border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important

ลองถ้ามันใช้งานได้

— AbhiRoczz ...
แหล่งที่มา