Làm thế nào để tạo kiểu đúng một vùng văn bản với bóng bên trong và cuộn

Question

Tôi đưa một nội bóng trên tất cả các điều khiển, đầu vào của tôi và textareas bằng cách sử dụng CSS sau đây:

input { 
    padding: 7px; 
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd; 
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd; 
    box-shadow: inset 2px 2px 2px 0px #dddddd; 
} 

và, với một số phong cách khác , trông như thế này (trong Firefox, và tương tự như trong các trình duyệt khác):

Nhưng đệm giúp tách biệt nội dung từ inner shadow phá vỡ textarea xung quanh cuộn:

và nếu tôi loại bỏ các đệm, các văn bản chồng chéo cái bóng, như thế này:

tôi có thể thêm đệm chỉ sang bên trái, giải quyết sự chồng chéo với cái bóng trái nhưng không phải với bóng hàng đầu, trong khi có thanh cuộn cái nhìn tốt:

tôi cũng có thể thêm p thêm ở khắp mọi nơi nhưng ở phía bên phải, có văn bản hiển thị một cách chính xác nhưng thanh công cụ vẫn có vẻ khá kỳ quặc:

Có cách nào để giải quyết này?

Answer 1

Lấy padding tài sản để chỉ ảnh hưởng đến nội dung nhưng không phải thanh cuộn không thể sử dụng các phần tử văn bản chuẩn. Bạn có thể sử dụng contenteditable DIV. Ví dụ, kiểm tra fiddle này: http://jsfiddle.net/AQjN7/

HTML:

<div class="outer" contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> 

CSS:

.outer { 
    -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd; 
    -moz-box-shadow: inset 2px 2px 2px 0px #dddddd; 
    box-shadow: inset 2px 2px 2px 0px #dddddd; 
    height: 200px; 
    margin: 10px; 
    overflow: auto; 
    padding: 7px 10px; 
    width: 300px;  
    font-family: tahoma; 
    font-size: 13px; 
    border: 1px solid #aaa; 
} 
​ 

Answer 2

Bạn chỉ có thể thêm: padding-right: 0; vào bộ chọn văn bản và nó sẽ xếp hàng thanh cuộn của bạn với cạnh của phần tử. :)

Answer 3

Bạn có thể quấn textarea trong một div:

<div class="textarea-wrapper"> 
    <textarea> 
</div> 

css:

.textarea-wrapper{ 
    box-shadow: inset 2px 2px 2px 0px #ddd; 
} 
textarea { 
    padding: 10px; 
    background: transparent; 
    border: none; 
} 

Một jsFiddle đây: http://jsfiddle.net/rXpPy/

Answer 4

Thêm vào đó - thay vì sử dụng chỉ đơn giản là đầu vào, mà sẽ nhắm mục tiêu các nút, bạn có thể nhắm mục tiêu đầu vào văn bản cụ thể với

input[type="text"]