2011-10-06 35 views
7

Tôi không muốn tắt hoàn toàn thay đổi, nhưng các nút điều chỉnh kích thước trên textareas không phù hợp với phần còn lại của kiểu trang. Có cách nào tôi có thể thay đổi cách nó trông, có lẽ thay thế nó bằng một hình ảnh của riêng tôi? Không cần phải tương thích ngược đối với các trình duyệt không hỗ trợ HTML5.HTML5/CSS3 - Thay đổi giao diện điều khiển đổi kích thước

Trả lời

2

Đây là một điều khó khăn. Không có cách nào tạo kiểu điều khiển cụ thể này. Thậm chí nếu bạn buộc một diện mạo khác nhau dưới webkit bạn vẫn nhận được thay đổi kích thước tay cầm chết tiệt:

http://jsfiddle.net/qw73n/

Bạn có thể, tuy nhiên, công việc xung quanh nó và đặt một hình nền ở góc dưới bên trái:

http://jsfiddle.net/q5kdr/

Nhưng trình xử lý vẫn xuất hiện trên đầu trang.

Tôi sợ sự lựa chọn duy nhất là sử dụng jQuery UI thay đổi kích thước:

http://jqueryui.com/demos/resizable/

5

Tôi làm điều này bằng cách gói textarea trong một DIV, sau đó đặt một :: sau phần tử trong div rằng trong đó có chứa một biểu tượng và có cùng màu nền như vùng văn bản.

Điều quan trọng là cung cấp cho :: sau phần tử "pointer-events: none;" bởi vì nếu không người dùng không thể nhấp qua nó. Tính năng này hoạt động trên tất cả các trình duyệt hiện đại (http://caniuse.com/#feat=pointer-events).

resize handle icon

.textarea_wrapper::after { 
    pointer-events: none; 
    content: "↓"; 
    font-size: 14px; 
    position: absolute; 
    height: 22px; 
    width: 20px; 
    text-align: center; 
    bottom: 2px; 
    right: -2px; 
    background-color: #efefef; 
    color: #777; 
} 

Đây là một fiddle: http://jsfiddle.net/herrfischerhamburg/59wy0ttj/7/

0

Làm điều đó như thế này:

Đặt một hình ảnh trên góc dưới bên phải nơi xử lý mặc định là! Vị trí tuyệt đối, v.v.

Sau đó, trên hình đặt con trỏ-sự kiện: không có gì và bạn đã hoàn tất! Nó giống như con trỏ bỏ qua hoàn toàn hình ảnh và các sự kiện đi trên chính vùng văn bản.

Chúc mừng !!

LƯU Ý: Có thể bạn phải sử dụng thay đổi kích thước: dọc theo vùng văn bản vì hành vi thay đổi từ trình duyệt đến trình duyệt !!

XEM NÀY: https://jsfiddle.net/1bsoffu3/1/a

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