Html研究
気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

 チェックボックス


cssでtransformという物を使うと与えられた要素を回転、拡大縮小、 傾斜、移動することできると言うことで
やってみました。
transform: rotate(90deg)ですと90度回転するという。
マウスが乗っているとき、またクリックしている間などあるけれど
クリックしたらまたクリックするまでそのままというのがやりたかったので
調べるとチェックボックスを使う方法が見つかった。

親に
position: relative;を指定し
..check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
visibility: hiddenを書かないとチェックボックスが出る。
有っても動きは同じです。

htmlで
wrapをdivにしたら機能しないので
調べたら
labelを使うといいらしい。

<label class="wrap">
『LABELとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。』
とのこと

なるほど

css
<style>
.wrap {
position: relative;
}
.check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
.translate{
margin-top: 100px;
padding: 10px 20px;
border: 1px solid #59b1eb;
background: #59b1eb;
text-align: center;
color: #fff;
width: 320px;
height: 30px;
transition: all 1s ease;/*これでゆっくり*/
  cursor: pointer;;/*これでカーソルが手の形*/
}
input:checked ~ .translate{
transform: rotate(90deg);
}
.translate2{
margin-top: -52px;
padding: 10px 20px;
border: 1px solid pink;
background: pink;
text-align: left
color: #fff;
width: 160px;
height: 30px;
}

</style>

HTMLは

<label class="wrap">
<input class="check" type="checkbox">
<div class="translate">translate</div>
</label>
<div class="translate2">translate2</div>

水色の四角をクリックしてみてください。


【2021/04/17 00:00】 css | トラックバック(0) |
コメント(0)

comment
投稿













管理者にだけ表示を許可する




trackback
trackback url ↓
http://dreamy.blog2.fc2.com/tb.php/249-9a2b8248



| ホーム |
ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

author_name=Dreamy/album

気に入った事はとことんやってしまいます。
ほどほどにしたいものデス。ヾ(´▽`*)ゝ
recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

05 | 2021/06 | 07
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク

Template production /preview