無職です。はたらいてます。 旧ブログ: 1 Entry per Day

HTML

input[type=range]で範囲指定っぽいUI

input[type=range]要素を組み合わせると、なんちゃって範囲指定のUIが構築できそうなのでやってみた。 開始値を指定するスライダーと、終了値を指定するスライダーが連動して、開始値が終了値より先にいったりしないよう制限もかけている。 developer.mozill…

全日本ラジオボタンのラベルにクリック判定を付けろ協会

全日本ラジオボタンのラベルにクリック判定を付けろ協会 会長の id:mstssk です。 皆さんはチェックボックスやラジオボタンのラベル(キャプション)をクリックしても選択したことにならず憤慨したことはありませんか? 私はあります。 (追記)タイトルはラ…

video要素のcontrols属性のブラウザごとの動作

2020/03/22現在はほぼ全てのブラウザでvideo要素のcontrols属性をサポートしている。 でもどうせブラウザによって動作が違うんでしょ、と思って調べました。 https://caniuse.com/#feat=mdn-html_elements_video_controls video要素のcontrols属性のブラウザ…

Safariでinput要素にbackground:none;を指定しつつcolorで一定より薄い文字色を指定すると完全に文字が消える

雑なメモ Safari 12で再現。PCもモバイルも。 Safariでinput要素にbackground:none;を指定しつつcolorで一定より薄い文字色を指定すると完全に文字が消えるという現象に遭遇した。例えば input:disabled{color:#ccc;background:none;} で文字が消える。https…

SPAでvideo要素とsource要素を組み合わせるときに気をつけること

video要素を使うときにsource要素を使って動画リソースを指定する場合、source要素の生成タイミングに気を使う必要があります。 例えば、Vue.js で動画リソースのvideoUrl という変数をHTMLテンプレートにバインディングなら下のHTMLように書きます。 <video> <source :src="videoUrl" > </video> こ…