將webkit的滾動條樣式應用於textarea

Question

有什麼方法可以使用these shadow dom elements來將css只應用於特定的元素。我在想，我希望在我的頁面上實現webkit customer scrollbar，但在textarea中希望它們的寬度小於它們在文檔正文上的寬度。

，所以如果我有一個網頁的樣式

::-webkit-scrollbar { 
    width: 12px; 
} 

::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

div{ 
    height:5000px; 
    width:150px; 
    background-color:red; 
    float:left; 
} 
textarea{ 
float:left;  
    max-height:150px; 
    height:150px; 
} 

和HTML

<div id="theDiv"> 
    asdf 
</div> 

<textarea id="thebox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</textarea> 

我想直接將樣式表textarea的，並沒有影響任何其他元素。

function ImportStyleFile() { 
      var el = document.getElementById('thebox'); 
      var linkTag = el.createElement ("link"); 
      linkTag.href = "new.css"; 
      linkTag.rel = "stylesheet"; 
      var head = document.getElementsByTagName ("head")[0]; 
      head.appendChild (linkTag); 
     } 

其中new.css有一個風格類似，也就是說，

::-webkit-scrollbar-thumb { 
    border-radius: 0px; 
    -webkit-box-shadow: inset 0 0 6px rgba(20,20,20,0.5); 
} 

不幸的是，這並不能如此簡單的工作。我想你不能創建一個樣式表並將其附加到textarea。我如何能得到任何想法這個工作

Answer 1

的::-webkit-scrollbar是一個僞元素，並可以應用到一個單一的元素，如下所示：

textarea::webkit-scrollbar { ... }