select
情報からドキュメントの css を変更する2 つのボックスを作成しましたvalue
。
背景select
ボックスは のような色のみを使用します#159159
。
box-shadow select
box には、 のような追加情報が必要5px 5px 5px 5px #159159
です。
ここに例があります: JSFiddle
HTML
<select id="background" size="6">
<option value="" selected="selected">background</option>
<option value="#ff66ff" class="bcff66ff">#ff66ff</option>
<option value="#66ff66" class="bc66ff66">#66ff66</option>
<option value="#159159" class="bc159159">#159159</option>
<option value="#ffffff" class="bcffffff">#ffffff</option>
<option value="#000000" class="bc000000">#000000</option>
</select>
<br /><br /><br />
<select id="box-border" size="6">
<option value="" selected="selected">box-border</option>
<option value="5px 5px 5px 5px #ff66ff" class="bcff66ff">#ff66ff</option>
<option value="5px 5px 5px 5px #66ff66" class="bc66ff66">#66ff66</option>
<option value="5px 5px 5px 5px #159159" class="bc159159">#159159</option>
<option value="5px 5px 5px 5px #ffffff" class="bcffffff">#ffffff</option>
<option value="5px 5px 5px 5px #000000" class="bc000000">#000000</option>
</select>
jQuery
$("#background").change(
function()
{$('body').css("background-color", $(this).val());}
);
$("#box-border").change(
function()
{$('select').css("box-shadow", $(this).val());
$('select').css("-moz-box-shadow", $(this).val());
$('select').css("-webkit-box-shadow", $(this).val());
}
);
jQueryで追加コードを追加することで、ボックスボーダーボックスを背景ボックスselect
と同じように使用できると思います。value
select
しかし、私は方法を知りませんか?私は次のようなことを推測しています...
$("#box-border").change(
function()
{$('select').css("box-shadow", "5px 5px 5px 5px" + $(this).val());
$('select').css("-moz-box-shadow", "5px 5px 5px 5px" + $(this).val());
$('select').css("-webkit-box-shadow", "5px 5px 5px 5px" + $(this).val());
}
);
私を助けてくれてありがとう:)