ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。

JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。

WBOYオリジナル: 2016-05-16 18:41:24918ブラウズ

この記事に関連する写真

<title>

</title>JavaScript を使用してラジオとチェックボックスのスタイルをカスタマイズします

<h4>
</h4>
ラジオボタンのスタイル: <div class="input_style">
<span>
<input type="radio" name="sex" value="boy" checked id="sex_boy">
</span><label for="sex_boy"></label>男性<span>
<input type="radio" name="sex" value="girl" id="sex_girl">
</span><label for="sex_girl"></label>女性</div>
<div class="input_style">
<span>
<input type="radio" name="marry" value="yes" id="marry_yes">
</span><label for="marry_yes"></label>男の子<span>
<input type="radio" name="marry" value="not" checked id="marry_not">
</span><label for="marry_not"></label>女の子</div>
<h4>
</h4>
チェックボックスのスタイル: <ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby1">
</span><label for="hobby1"></label>xhtml</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby2">
</span><label for="hobby2"></label>CSS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby3">
</span><label for="hobby3"></label>JavaScript</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby4">
</span><label for="hobby4"></label>フラッシュ</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby5">
</span><label for="hobby5"></label>Ajax</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby6">
</span><label for="hobby6"></label>AS</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby7">
</span><label for="hobby7"></label>フレックス</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby8">
</span><label for="hobby8"></label>PHP/.NET/JSP</li>
</ul>
<ul class="checkbox input_style">
<li>
<span><input type="checkbox" name="hobby" checked id="hobby9">
</span><label for="hobby9"></label>理解しました</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby10">
</span><label for="hobby10"></label>全般</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby11">
</span><label for="hobby11"></label>熟練</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby12">
</span><label for="hobby12"></label>マスタリー</li>
<li>
<span><input type="checkbox" name="hobby" id="hobby13">
</span><label for="hobby13"></label>上級専門家</li>
</ul>
<div class="button" id="button">
<input type="button" value="加载样式">
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ID番号_javascriptスキルで生年月日と性別を取得するjsコード次の記事：ID番号_javascriptスキルで生年月日と性別を取得するjsコード

続きを見る

JavaScript を使用して、input_form 特殊効果のラジオとチェックボックスのスタイルを変更します。

関連記事