すぐに忘れるので画像も文字列も変化するトグルボタン。デザインは適当。
まずはコードから
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.btn,.btn:checked+label,.btn+label+label
{
display:none;
}
.btn+label,.btn:checked+label+label
{
display:inline-block;
user-select: none;
background-repeat: no-repeat;
}
.btn+label
{
background-color:aqua;
}
.btn:checked+label+label
{
background-color:pink;
}
.btn:active+label,
.btn:active+label+label
{
background-color: lightgray;
}
.vertical+label,.vertical+label+label
{
padding-top: 2em;
background-position:top;
background-size: auto 2em;
}
.horizontal+label,.horizontal+label+label
{
padding-left: 2em;
background-position:left;
background-size: 2em auto;
}
.image+label,.image+label+label
{
height: 2em;
width: 2em;
background-position:center;
background-size: contain;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
.text+label,.text+label+label
{
background-position:center;
background-size: 0 0;
}
</style>
<table>
<TR><TH>ボタン</TH><TH>トグル</TH></TR>
<TR><TD>
<input class="btn vertical" type="button" id="1"/>
<label for="1" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn horizontal" type="button" id="2"/>
<label for="2" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn image" type="button" id="5"/>
<label for="5" style="background-image:url(send.png)">メール送信</label>
<hr>
<input class="btn text" type="button" id="6"/>
<label for="6" style="background-image:url(send.png)">メール送信</label>
<hr>
</TD>
<TD>
<input class="btn vertical" type="checkbox" id="3"/>
<label for="3" style="background-image:url(opened.png)">既読メール</label>
<label for="3" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn horizontal" type="checkbox" id="4" checked/>
<label for="4" style="background-image:url(opened.png)">既読メール</label>
<label for="4" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn image" type="checkbox" id="7"/>
<label for="7" style="background-image:url(opened.png)">既読メール</label>
<label for="7" style="background-image:url(unopened.png)">未読メール</label>
<hr>
<input class="btn text" type="checkbox" id="8"/>
<label for="8" style="background-image:url(opened.png)">既読メール</label>
<label for="8" style="background-image:url(unopened.png)">未読メール</label>
<hr>
</TD></TR>
</table>
</body>
<html>
動作は以下のような感じ
| 普通のボタン | トグルするボタン |
|---|---|
|
|
|
0 件のコメント:
コメントを投稿
質問、要望、指摘など書いていただいてもよいですが、対応できるとは限りませんのでご了承ください。私に対するものも含め他の人を嫌な気分になるようなコメントは避けてください。