Wijmo UI for the Web
CSSスタイルの適用
| Wijmo ユーザーガイド > ウィジェット > Slider > 操作手順 > CSSスタイルの適用 |
クイックスタートの例に基づき、CSS スタイルを使用して、スライダの各要素の色とスタイルを変更できます。 以下は、スライダで使用可能な CSS セレクタのリストです。インストールフォルダにある jquery.wijmo.wijslider.css ファイルでもセレクタを参照できます。
CSS セレクタ
ドロップダウンからスタイルをコピーして、<head> セクション内に貼り付けます
| スタイル |
コードのコピー |
|---|---|
<style type="text/css"> #slider { /*Sets the styles of the slider track.*/ border-color: Black; border-width: thin; background-color: CornflowerBlue; width: 300px; } .wijmo-wijslider-incbutton { /*Sets the styles of the outer edge of the increment button.*/ background: CornflowerBlue; } .wijmo-wijslider-decbutton { /*Sets the styles of the outer edge of the decrement button.*/ background: CornflowerBlue; } .wijmo-wijslider-incbutton .ui-icon-triangle-1-e { /*Sets the styles of the inner circle of the increment button.*/ background-color: White; } .wijmo-wijslider-decbutton .ui-icon-triangle-1-w { /*Sets the styles of the inner circle of the decrement button.*/ background-color: White; } #slider .ui-slider-handle { /*Sets the styles of the thumb button.*/ background: LightSteelBlue; border-color: Black; } </style> | |
全て展開
すべて折りたたむ