Xóa các góc được làm tròn khỏi phần tử <select> trong Chrome / Webkit

143

Biểu định kiểu tác nhân người dùng cho Chrome cung cấp bán kính đường viền 5px cho tất cả các góc của một <select>phần tử. Tôi đã cố gắng loại bỏ điều này bằng cách áp dụng bán kính 0px thông qua biểu định kiểu bên ngoài của mình, cũng như nội tuyến trên chính phần tử; Tôi đã thử cả hai border-radius:0pxvà -webkit-border-radius:0px;tôi đã thử cụ thể hơn nữa border-top-left-radius:0px(cùng với đó là tương đương với bộ công cụ).

Không ai đang làm việc.

Khi tôi kiểm tra phần tử trong các công cụ dành cho nhà phát triển của webkit, Kiểu tính toán vẫn liệt kê bán kính là 5px. Nhưng nếu tôi nhấp vào mũi tên mở rộng bên cạnh nó để xem chi tiết cụ thể, nó sẽ đọc: Element.style - 0px. Và bên dưới nó cho thấy đặc tả css bên ngoài mà tôi đã đưa ra là 0px, cùng với đặc tả biểu định kiểu tác nhân người dùng là 5px. Và cả hai sau đó đều bị gạch bỏ, như họ nên được.

Có ý kiến ​​gì không?

select  webkit  css 
— maxedison
nguồn
Bạn cũng có thể gửi mã? Thậm chí tốt hơn nếu bạn đăng nó bằng jsfiddle.net.
— ngen
1
Tôi thực sự không có bất kỳ bán kính đường viền nào làm kiểu mặc định trong Chrome 10 trên Win7, có lẽ đây là phiên bản hoặc HĐH khác?
— Wesley Murch
Không có góc tròn trong Chrome 12 trên Windows 7.
— andyb
1
— Đáng

Câu trả lời:

244

Điều này làm việc cho tôi (kiểu xuất hiện đầu tiên không phải danh sách thả xuống):

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

http://jsfiddle.net/fMuPt/

— antonj
nguồn
179
Bất kỳ cách nào để loại bỏ các góc tròn nhưng giữ mũi tên bên phải?
— Adam
3
bạn cần thêm các mũi tên, ví dụ như ảnh nền với vị trí 100% 50% và thuộc tính không lặp lại. Tôi cũng đã sử dụng hình ảnh được mã hóa base64 trong css để tránh các yêu cầu http bổ sung.
— Karl Adler
26
@Adam Nó hoạt động với tôi nếu bạn sử dụng border: 0và thêm một phác thảo như:outline: 1px inset black; outline-offset:-1px
— Filipe Pereira
1
@FilipePereira Tôi rất thích nó, mặc dù tôi sẽ phải thêm rằng phần bù trừ phác thảo không được IE hỗ trợ.
— Tim
6
Điều này giúp loại bỏ các mũi tên bên phải, gây thiệt hại không thể chấp nhận cho trải nghiệm người dùng. Thay vào đó, phong cách thả xuống background-color: #yourbgvà border-style: nonesau đó tạo ra một div trực tiếp trước khi thả xuống với position: absolutevà border-bottom: 1px solid #youpickvà display: inline. Mũi tên được bảo quản, UX không hề hấn gì, sửa chữa tốt hơn.
— kính
90

Chỉ là giải pháp của tôi với hình ảnh thả xuống (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;
}

Tôi đang sử dụng bootstrap đó là lý do tại sao tôi sử dụng select.form-control
Bạn có thể sử dụng select{hoặc select.your-custom-class{thay vào đó.

— Afzal Hossain
nguồn
4
Đây là câu trả lời duy nhất giải quyết vấn đề của tôi, mặc dù vậy, hãy chú ý sử dụng nền so với hình nền vì màu tô của Svg sẽ ghi đè lên bất kỳ màu nền nào bạn đã đặt cho đầu vào của mình.
— Lucas M
Đồng ý, hãy bỏ phiếu cho câu trả lời này! Tôi không hiểu các phiếu khác về một câu trả lời không đầy đủ. Bất kỳ lời khuyên để sử dụng biểu tượng fontawgie thay vì nội tuyến svg?
— Nicolas Thery
FontAwgie là một bộ sưu tập các biểu tượng nhưng bạn chỉ cần một biểu tượng. Vì vậy, bạn cần trích xuất một trong các biểu tượng FA bằng một số công cụ như icomoon.io Sau khi xuất biểu tượng đó dưới dạng tệp svg hoặc png và liên kết nó từ css của bạn
— Afzal Hossain
Giải pháp tốt, nhưng trong tình huống của tôi, tôi đã thêm màu nền: trắng;
— Viktor Bogutskii
Tuy nhiên, lưu ý, khi bạn đặt width: auto;, mũi tên svg đã thêm sẽ phủ lên nội dung của vùng chọn. Điều này đòi hỏi một phần đệm bổ sung ở phía bên phải 16px. Tuy nhiên, phần đệm này có thể nhìn thấy trên tất cả các trình duyệt, phá vỡ thiết kế trên các trình duyệt khác. Tôi chưa có giải pháp nào cho điều đó ...
— Klaas van der Weij
31

Nếu bạn muốn viền vuông và vẫn muốn mũi tên giãn nở nhỏ, tôi khuyên bạn nên điều này:

select.squarecorners{
     border: 0;
     outline: 1px solid #CCC;
     background-color: white;
}
— jordan314
nguồn
2
Vấn đề với điều này là bạn sẽ ghi đè mặc định outlinevào :focus. Nếu bạn định sử dụng câu trả lời này, bạn nên thay đổi select:focusphong cách của mình để hiển thị trực quan rằng selectphần tử đang trở nên hoạt động, hoặc :focused, khi nhấp.
— Devin McInni
@ jordan314 Kiểm tra các góc tròn trên ảnh này . Bán kính biên: 0; không có hiệu lực trên thẻ chọn. Ít nhất là trên Chrome OSX.
— Jammer
1
@ 7immy thật lạ, tôi cũng có trên Chrome OS X và đây là ảnh chụp màn hình của fiddle trên imgur.com/r6ce6Yv
— jordan314
1
@ jordan314 Thế này thì sao? jsfiddle.net/78xa6qud/2 . Tôi đoán chúng ta có thể thoát khỏi nó nếu nền của chọn và nền phía sau cùng màu.
— Jammer
@ 7immy ah vâng, tôi đoán đó là một cảnh báo.
— jordan314
7

Một số giải pháp tốt ở đây nhưng giải pháp này không cần SVG, bảo vệ đường viền thông qua outlinevà đặt nó vào nút.

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>
Mở rộng đoạn trích

— aleemb
nguồn
6

Mặc dù câu trả lời trên cùng sẽ loại bỏ đường viền, nhưng nó cũng loại bỏ mũi tên gây khó khăn cho người dùng nếu không thể xác định thành phần là một lựa chọn.

Giải pháp của tôi là chỉ cần dán một div màu trắng (có đường kính bán kính: 0px) phía sau phần chọn. Đặt vị trí của nó là tuyệt đối, chiều cao của nó là chiều cao của lựa chọn, và bạn nên đi!

— Sậy Martin
nguồn
4

Giải pháp với mũi tên thả xuống bên phải tùy chỉnh, chỉ sử dụng css (không có hình ảnh)

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>
Mở rộng đoạn trích

— Mihai Crăiță
nguồn
Định vị nền hoạt động tốt hơn cho nhu cầu của tôi là: background-position: calc(100% - 4px) center, 100% center;Điều này di chuyển mũi tên đến giữa lựa chọn và tất cả các bên phải. Cảm ơn rất nhiều cho sự khởi đầu tuyệt vời!
— Brandon
3

Một cách để giữ cho nó đơn giản và tránh làm hỏng các mũi tên và các tính năng khác như vậy chỉ là đặt nó trong một div có cùng màu nền với thẻ chọn.

— Daniel Santos
nguồn
1
Tôi đồng ý, đây là giải pháp di động đơn giản và đáng tin cậy nhất.
— John Henckel
1

Loại bỏ các mũi tên nên tránh. Một giải pháp bảo tồn các mũi tên thả xuống là trước tiên loại bỏ các kiểu khỏi danh sách thả xuống:

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

Sau đó tạo div trực tiếp trước khi thả xuống trong HTML của bạn:

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

Và phong cách div như thế này:

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

Hiển thị nội tuyến sẽ giữ cho div không đi đến một dòng mới, vị trí tuyệt đối loại bỏ nó khỏi dòng chảy của trang. Kết quả cuối cùng là một gạch chân sạch đẹp mà bạn có thể tạo kiểu theo ý muốn và trình đơn thả xuống của bạn vẫn hoạt động như người dùng mong đợi.

— người tôn sùng
nguồn
1

Inset box-Shadow thực hiện thủ thuật.

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

Bản giới thiệu

— Marco Allori
nguồn
0

Vì một số lý do, nó thực sự bị ảnh hưởng bởi màu của đường viền ??? Khi bạn sử dụng màu tiêu chuẩn, các góc sẽ được làm tròn nhưng nếu bạn thay đổi màu ngay cả một chút thì việc làm tròn sẽ biến mất.

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

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

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

— mcallahan
nguồn
Hmm không chắc chắn về OSX. Chỉ cần thử lại trên Windows (Phiên bản Chrome 45.0) và nó vẫn hoạt động. Tôi đoán để làm cho vấn đề trở nên kỳ lạ hơn nữa, đó là nền tảng cụ thể ...
— mcallahan
Đó là bởi vì thiết lập đường viền khiến trình duyệt tự hiển thị combobox, thay vì sử dụng cái bên dưới do HĐH cung cấp.
— Kong
0

tôi cũng có giải pháp. hy vọng nó có thể giúp bạn :)

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>
Mở rộng đoạn trích

— Amit
nguồn
0

Sau đây là cách để làm điều đó;

  1. Tạo một hình ảnh nền trông giống như một thả xuống.
  2. Tắt sự xuất hiện của trình duyệt
  3. Căn chỉnh hình nền trên thành phần chọn
  .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;
  }
— Jerome Anthony
nguồn
-1

Tôi đã sử dụng giải pháp của jordan314, nhưng sau đó tôi đã thêm lớp "viền đèn" để chọn. Nếu bạn có lớp ánh sáng viền mặc định được xác định trong css, bạn có thể trực tiếp sử dụng nó. Nó chỉ định nghĩa đường viền là màu trắng). Tôi đã thay đổi đường viền thành hình vuông / loại bỏ bán kính và duy trì mũi tên.

Đây là những gì tôi đã làm:

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

nếu bạn không có đèn viền được xác định trước, chỉ cần thêm vào css của bạn:

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

 #type {
   border:0;
   outline:1px solid #ddd;
   background-color:white;
 }
</style>
— Sitti Munirah Abdul Razak
nguồn
-10

Đặt CSS là 

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

Hãy thử nếu nó hoạt động.

— AbhiRoczz ...
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.