formまわりのcss

inputの見栄えに気を使う練習。

手始めにこんな感じの詮索窓をつくってみる。

練習ページ>input type=”search”とplaceholder

気になった点

  • 表示サイズを変更すると色々ズレる、inputにfloatを使ったりheightを固定したりしないと解決出来なかった。もっと上手い方法があるのではないか?
  • HTML5で追加されたtype=”search”でマークアップしてみたのを忘れていて、webkitでinputがリセットできないなぁと途方に暮れた。
  • はやいところwebkit以外もplaceholderに対応してくれたらいいのに。

webkitだとtype=”search”のborderとbackground-imageが設定出来ない?

[追記 / 20100418]
:visited の挙動が変更に。制作への影響は? | Web標準Blog | ミツエーリンクス

:visitedに指定できるプロパティが color, background-color, border-*-color, outline-color, column-rule-color といった色指定に限定されることでしょうか。どういうことかというと、:visitedに指定されたbackground-image などが効かなくなります(:link と同じものが適用されるようになります)。

同じ対策がWebKitでも行われていることから、将来的にSafariやChromeでも同様の変更が反映されるようになりそうです。

今回のはvisitedを使ってないけど、訪問済みのチェックボックスなんかをvisitedで変更してる人は注意が必要かもですね。
あぶないあぶない。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.