Ẩn thanh cuộn dọc của SELECT nhiều dòng trong Firefox và Chrome?

Vấn đề này có vẻ khá đơn giản (overflow:hidden, phải không?) Cho đến khi tôi không thể giải quyết được. Tôi có một đa dòng đơn giản CHỌN với kích thước được xác định:Ẩn thanh cuộn dọc của SELECT nhiều dòng trong Firefox và Chrome?

<select size="10" name="elements"> 
... 
</select>

MSIE và Opera hiển thị thanh cuộn dọc chỉ khi cần thiết, nhưng Firefox và Chrome luôn hiển thị thanh cuộn dọc trong tình trạng tàn tật.

Tôi đã thử thiết lập tràn, tràn-y và thậm chí tràn-x, nhưng không có gì hoạt động. Ý tưởng nào?

Nguồn

2010-07-04 Sergei

Bạn có thể không, rõ ràng: http://www.webdeveloper.com/forum/showthread.php?t=154496

Nguồn

2010-07-04 03:16:58

có vẻ như thật, không may. – Sergei

-1

Điều duy nhất tôi có thể nghĩ đến là để chồng lên thanh cuộn bằng cách định vị hình ảnh hoặc rắn DIV với z-index cao ngay trên đầu SELECT thanh cuộn. Nhưng đây sẽ là một hack xấu xí.

Nguồn

2010-07-04 03:33:01

Bạn có thể, using some JavaScript

Không phải là giải pháp tốt nhất, nhưng nên làm việc :)

Nguồn

2010-12-10 16:32:12

Hãy thử điều này:

<html> 
<head> 
<style> 
div.border { 
    margin-right: 0px; 
    border-style:solid; 
     overflow:hidden; 
} 
select.hiddenscroll { 
    margin-right: -20px; 
    margin-top: -3px; 
    margin-bottom: -3px; 
    padding-right: -20px; 
     overflow:hidden; 
} 
</style> 
</head> 
<body> 
    <table> 
    <tr><td> 
    <div class="border" style="overflow:hidden;"> 
     <select size="5" multiple="multiple" class="hiddenscroll" scrolling="no" seamless="seamless"> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      <option>Option 4</option> 
      <option>Option 5</option> 
     </select> 
    </div> 
    <table> 
    </tr></td> 
</body> 
</html>

Nguồn

2012-05-23 16:56:35

Mô tả ngắn gọn về giải pháp cho vấn đề của OP sẽ tốt hơn. Vui lòng đọc: http://stackoverflow.com/questions/how-to-answer – askmish

<div style="overflow: hidden;"> 
<select style="width: 110% ; border: 0px;"> 
.....

Nguồn

2013-04-14 08:25:03 mon

Đây là một chủ đề khá cũ bây giờ nhưng tôi tưởng tượng rằng có những người khác chạy vào nó trong việc tìm kiếm một câu trả lời cho cùng một câu hỏi giống như tôi đã làm. Đối với các trình duyệt Webkit, có một giải pháp rất đơn giản với thực tế là chúng (Chrome và Safari) cho phép thanh cuộn được tạo kiểu.

Đây là tài liệu tham khảo phong nha về nhiều điều bạn có thể làm với webkit scrollbars. CSS bạn cần ở đây là

select::-webkit-scrollbar{width:1px;background-color:transparent}

Bí quyết được về cơ bản làm hai điều

Làm cho thanh cuộn chỉ một pixel rộng vì vậy nó không nhận được trong cách
Đặt màu nền của nó để transprent

Nếu bạn muốn làm việc này chỉ cho một tập con của thanh cuộn chọn, bạn nên thay đổi CSS bằng cách thay đổi thanh cuộn cho lớp giả

.subsel::-webkit-scrollbar{width:1px;background-color:transparent}

và sau đó sử dụng lớp đó cho các lựa chọn bạn muốn sửa đổi. ví dụ.

<select class='subsel' id='selOne' size='4'> 
<option value='1'>Option One</option> 
<option value='2'>Option Two</option> 
</select>

Đây là một fiddle cho thấy "gỡ bỏ" thanh cuộn trong hành động

rememebr it will only work with Webkit browsers!

Nguồn

2013-06-23 05:55:37 DroidOS

Các giải pháp từ @mon phá vỡ trong một số trường hợp (ví dụ như ô trong bảng bên trong), mặc dù nó là một tuyệt vời dung dịch. Tuy nhiên cái này cũng tương tự nhưng tốt hơn:

Hide vertical scrollbar in <select> element, solution with margins

Nguồn

2013-11-03 12:11:08

Ẩn thanh cuộn dọc của SELECT nhiều dòng trong Firefox và Chrome?

Trả lời

Các vấn đề liên quan