如何正確地使用內陰影和滾動條樣式化文本區域

[英]How to properly style a text area with inner shadows and scrollbar


I'm putting an inner-shadow on all my controls, inputs and textareas by using the following CSS:

通過使用以下CSS,我在所有控件、輸入和textarea上添加了一個內陰影:

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;
}

and, with some other styling, looks like this (in Firefox, and similar in other browsers):

另外,還有其他一些樣式,像這樣(在Firefox中,在其他瀏覽器中類似):

enter image description here

But the padding that helps separate the content from the inner shadow breaks the textarea around the scrollbar:

但是,幫助將內容與內部陰影分離的填充將會破壞滾動條周圍的文本區域:

enter image description here

and if I remove the padding, the text overlaps the shadow, like this:

如果我去掉填充,文字就會和陰影重疊,就像這樣:

enter image description here

I can add padding only to the left, solving the overlap with the left shadow but not with the top shadow, while having the scrollbar look good:

我可以只在左邊添加填充,解決與左陰影重疊的問題,但不能與上陰影重疊,同時滾動條看起來不錯:

enter image description here

I can also add padding everywhere but on the right side, having the text displayed correctly but the toolbar still looks rather odd:

我也可以在任何地方添加填充,但在右邊,讓文本顯示正確,但工具欄看起來仍然相當奇怪:

enter image description here

Is there any way to solve this?

有辦法解決這個問題嗎?

4 个解决方案

#1


19  

Getting the padding property to affect only the content but not the scrollbar is not possible using standard textarea elements. For that you can use a contenteditable DIV. For example, check this fiddle: http://jsfiddle.net/AQjN7/

使用標准textarea元素不可能使填充屬性只影響內容而不影響滾動條。為此,您可以使用contenteditable DIV

HTML:

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:

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;
}
​

#2


0  

You can just add: padding-right: 0; to the textarea selector and it will line up your scrollbar with the side of the element. :)

你可以只加:划右:0;到textarea選擇器,它會將滾動條與元素的邊對齊。:)

#3


0  

You could wrap the textarea in a div:

可以將textarea封裝在div中:

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

css:

css:

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

A jsFiddle here: http://jsfiddle.net/rXpPy/

一個jsFiddle:http://jsfiddle.net/rXpPy/

#4


0  

Additionally - rather than using simply input, which will target buttons, you can target text inputs specifically with

另外,您可以使用專門針對文本輸入的按鈕,而不是使用簡單的輸入

input[type="text"]

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/01/17/72983315ca60ae1a65de3fd0cc480d08.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com