formまわりのcss

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

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

気になった点

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

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

[html]<form>
<input type="text" placeholder="サイト内検索" />
<input type="submit" value="検索" />
</form>[/html]
[css]input {
float:left;
}
/* — clear ————————- */
form {
/zoom : 1;
}
form:after {
content : ”;
display : block;
clear : both;
}
dl {
margin-bottom:2em;
}
/* — sample1 ————————- */
#sample1 input[type="search"],
#sample1 input[type="text"] {
border:1px solid #333;
width:200px;
height:25px;
padding:0 0 0 0.5em;
-moz-border-radius:3px 0 0 3px;
-webkit-border-bottom-left-radius:3px;
-webkit-border-top-left-radius:3px;
background:-moz-linear-gradient(top, #e8e8e8, #fff);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e8e8e8), color-stop(1, #fff));
}
#sample2 input[type="search"],
#sample2 input[type="text"] {
width:230px;
height:25px;
border:1px solid #333;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:0 0 0 0.5em;
}
/* — submit ————————- */
#sample1 input[type="submit"],
#sample2 input[type="submit"] {
border:0;
width:30px;
height:27px;
text-indent:-7777px;
display:block;
}
#sample1 input[type="submit"] {
background:url(../img/search-1.png) no-repeat;
}
#sample2 input[type="submit"] {
background:url(../img/search-3.png) no-repeat;
margin-left:-30px;
}
#sample1 input[type="submit"]:hover,
#sample2 input[type="submit"]:hover {
background-position:0px -27px;
}
#sample1 input[type="submit"]:active,
#sample2 input[type="submit"]:active {
background-position:0px -54px;
}
[/css]

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

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

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

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.