「jQuery CompareWYWプラグインで画像のbefore / after を分かりやすく表示する」で紹介したjQuery CompareWYWプラグインを利用すると、デフォルトでは画像を利用する設定となっています。
画像の指定を無効にする変更方法です。
変更するファイルはjquery.comparewyw.cssです。
.compareWYW .indicator .handle { position: absolute; background-color: #d6d6d6; background-image: url(handle.png); background-repeat: no-repeat; }
↓こちらが画像指定のcssなので下記のようにコメントアウトします。
/* 画像を利用しないためコメントアウト .compareWYW .indicator .handle { position: absolute; background-color: #d6d6d6; background-image: url(handle.png); background-repeat: no-repeat; }*/
ハンドルの色を変更する場合
.compareWYW .indicator { background: #d6d6d6; position: absolute; z-index: 3; }
↓
.compareWYW .indicator { background: #222; /* ハンドルの色を変更 */ position: absolute; z-index: 3; }
ハンドルの表示幅を変更し影を付ける
.compareWYW .horizontalIndicator { height: 100%; width: 2px; }
↓
.compareWYW .horizontalIndicator { height: 100%; width: 3px; /* ハンドルの幅を変更 */ -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4); /* ハンドルに影をつける */ -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4); }