セレクトボックスのbox-sizingの初期値はborder-box

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

HTMLのセレクトボックス(<select>タグ)の高さをCSSで変更してみたものの、なぜかうまくいかないという。

具体的にいうと、想定していた大きさよりも小さくなってしまうという自体に。
例えば、上記のサンプルではheightを25pxとしているのに、Google Chromeのデベロッパーツールでレイアウトを確認してみると、実際のコンテンツ領域は21pxとなっています。
boxmodel

IEで見てもFirefoxで見ても同じ。IE10のドキュメントモードをIE7にしても同じ。
おかしいなぁ。と思いながらデベロッパーツールのスクロールバーをあげてみるとこんな記述が。
boxsizing

box-sizingの初期値がborder-boxということってあるんですね。
というわけで、box-sizingをcontent-boxとすることによって、想定の動きとなりました。

2013/10/10追記:
もう少し調べてみると、ボタンもbox-sizingの初期値はborder-boxでした。
テキストボックスやテキストエリアはcontent-box。

テーブルを複数行ごとにhoverでハイライトする方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

今の会社に入って数か月たったころ、前任者が作ったホームページのソースが分かりづらいので、新しく作り直したいという依頼を受けることになった。そのうちのいくつかのページにテーブルがあり、trごとにハイライトしているページが。どうやらJavaScriptでやっているようだったのだけれども、それを自分はCSSに書き換え。例えば以下のような感じで。

HTML

CSS

名前 ふりがな 年齢
中居正広 なかいまさひろ 39
木村拓哉 きむらたくや 39
稲垣吾郎 いながきごろう 38

しかし中には、データ数が多すぎて1セットで複数行になっているテーブルも。ソースを見てみると、どうやらtrタグの中に一つのtdタグを入れ、その中に新たにtableを入れてハイライトをつけているようだった。自分もそのやり方でいいのかと思ったら、これだと線の場所がバラバラことがあるといった問題らしいので、すべてを一つのテーブルで作ることに。いったいどうすりゃいいものか・・・。と少し考えて作ったのが下のようなもの。

HTML

CSS

名前 年齢 生年月日 血液型
ふりがな 出生地 愛称
中居正広 39 1972年8月18日 A型
なかいまさひろ 神奈川県藤沢市 中居くん
木村拓哉 39 1972年11月13日 O型
きむらたくや 東京都 キムタク
稲垣吾郎 38 1973年12月8日 O型
いながきごろう 東京都板橋区 ゴローちゃん

HTMLのテーブルにはヘッダーに該当する<thead>、フッターに該当する<tfoot>、そしてボディに該当する<tbody>の3つで構成されています。また、theadとtfootは同じテーブル内に一つしか記述してはいけないのですが、tbodyはいくつでも記述してもよいことになってるそうです。そのため、複数行をtbodyでまとめ、tbody上にマウスが乗ったらバックの色を変えるという処理をしてみました。なお、上記のタグを書かないと、tbodyと判断されます。そのため、theadタグをつけなかったら、テーブルのヘッダー部分まで色が変わってしまうので注意しましょう。

テーブルのセルをクリックしても、セル内のチェックボックスにチェックをつける方法

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

ネット上でアンケートをやっていると、<td>タグ内にチェックボックスがあることがあります。中には、そのセルの中のどこをクリックしてもチェックしてくれるものもあるのですが、チェックボックスをちゃんとクリックしなければチェックしないというのがほとんどです。

では、今回はセル内のどこをクリックしてもチェックボックスにチェックを入れる方法をお伝えします。親ノードが<div>タグとかだと、<label>で囲めばいいのですが、<td>タグだとその方法はできません。
 まず考えられるのが、以下のようなソースです。

分かりやすいように実際の表示では、幅高さともに100pxにし、上下中心位置に配置し、黒い単線をつけています。

では早速クリックしてみましょう。クリッククリック! おっ!できてるできてる。と思ってもらえたらうれしいです。
 ただ、これだと肝心のチェックボックスをクリックするとチェックがつかないときがあります。理由は単純、2度クリックするのと同じことをやっているからです(今確認してみると、OperaとIEではちゃんとチェックがつきました)。では、続いてこれの対処法を書いていきます。

そう、2度で戻ってしまうなら、3度クリックしたことにすればいいのです! この方法でも、IEやOperaでちゃんとチェックがつくようですし。

なんだか遠回しなような気もしますが、これ以外いい方法が思いつきません。もっといい方法があれば誰か教えてください。