帶滾動條的textarea上的圓角

在我的網站上，我有一個html textarea，其中包含大量文本，因此它有滾動條。那麼我想在我的文本區域有圓角，但是滾動條看起來很糟糕。帶滾動條的textarea上的圓角

這裏是我的HTML片段：

<textarea readonly class="xmlbox"> 
     @Html.DisplayFor(modelItem => item.XMLText) 
    </textarea>

這裏是我的CSS代碼段：

.xmlbox { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 2; 
    margin: auto; 
    padding: 20px; 
    width: 60%; 
    height: 50%; 
    border: 6px solid black; 
    border-radius: 20px/200px; 
    border-color: rgba(0, 0, 0, 0.3); 
    background: rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); 
    opacity: 1; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    -webkit-transition: opacity 1s ease, z-index 1s ease; 
    -moz-transition: opacity 1s ease, z-index 1s ease; 
    -ms-transition: opacity 1s ease, z-index 1s ease; 
    -o-transition: opacity 1s ease, z-index 1s ease; 
    resize: none; 
}

這裏是一個JSFiddle到明白我的意思。

有沒有辦法推動滾動條或縮小或基本上任何東西，使它看起來不錯？我看到

的一件事是這樣的畫面： sharp inner corner, round outer

，我想這可能是工作，但我有麻煩重現邊境的CSS。關於如何使滾動的textarea看起來不錯，圓角的任何提示或想法，請讓我知道！謝謝！

注意：這需要在所有瀏覽器中看起來不錯，所以不要只使用webkit解決方案。如果你知道所有瀏覽器的方式，那就很好。我傾向於內側角落和外側邊界，但我無法複製圖片以查看是否可行。或者另一種方法是將滾動條放在右側？那可能嗎？

來源

2013-07-24 juleekwin

http://css-tricks.com/ custom-scrollbars-in-webkit/ – dezman

您應該可以通過使用圓角樣式將textarea嵌套在div中來實現類似的效果。

有一個例子在這裏：

DIV with rounded corners and internal scrollbars

來源

2013-07-24 19:47:20 SlitCanvas

我需要這個在所有瀏覽器中都很好看，並且這些使用了我很清楚的webkit。這就是爲什麼我更多地考慮內部尖角和外部邊框的方式，以保持瀏覽器之間的一致性。 – juleekwin

放入一個div textarea的，並給它一個邊界半徑和襯墊

<div style="border-radius:10px; border:1px solid #000; padding:20px;"> 
    <textarea readonly class="xmlbox"> 
     @Html.DisplayFor(modelItem => item.XMLText) 
    </textarea> 
</div>

來源

2013-07-24 19:49:52

帶滾動條的textarea上的圓角

回答

相關問題