2

これらのシャドウ DOM 要素を使用して css を特定の要素にのみ適用する方法はありますか。Webkit カスタマー スクロールバーを自分のページに実装したいと考えていますが、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>

スタイルシートをテキストエリアに直接適用し、他の要素に影響を与えないようにしたいと考えています。

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

残念ながら、これはそれほど単純には機能しません。スタイルシートを作成してテキストエリアに添付することはできないと思います。これを機能させる方法についてのアイデア

4

1 に答える 1

3

は::-webkit-scrollbar疑似要素であり、次のように単一の要素に適用できます。

textarea::webkit-scrollbar { ... }
于 2013-03-06T23:35:45.940 に答える