jQuery CompareWYWプラグインで画像を利用しないようにCSSを変更する

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