link1898 link1899 link1900 link1901 link1902 link1903 link1904 link1905 link1906 link1907 link1908 link1909 link1910 link1911 link1912 link1913 link1914 link1915 link1916 link1917 link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043
トップページ > IT, Internet, Mac, ブログ > 角丸のテキストエリアを表示する input type="search"

Whiskey barrel clipart on PhoPng.

角丸のテキストエリアを表示する input type="search"

検索フォームのテキストエリアを角丸にして、さらに虫眼鏡アイコンまで表示する方法。(でもSafariのみ)

これわりと古くから知られているようですが「input」タグの属性値のみでテキストエリアを角丸にできる方法がありました。

type属性を「text」ではなく「search」に変更するだけ。残念ながらSafari独自の拡張だそうですが、IEやFXなどでは「text」の際と変わりなく表示されます。以下サンプルです。

これはごく普通のテキストエリア

こちらはtype属性を「search」にしたテキストエリア

Safari 以外のブラウザで見てる方のために、以下にGIF画像も用意しました。type属性が「search」だと角丸になるんですね。
search form

さらに、検索した履歴を残すには「autosave="サイト名等"」を、履歴の表示数は「results="数値"」を追記するようです。これをやっておくと虫眼鏡アイコンが表示されます。

テキストエリア内の初期値は「value="ほげほげ"」が優先されますが、「placeholder="ほげほげ"」という記述もできます。「value」と違って薄いグレーの文字色になります。「value」の値が検索履歴に置き換わるから「placeholder」属性が必要になるのかな?

ということで以下のコードをHTMLに記述すると…
<input type="search" autosave="webdog" results="5" placeholder="角丸です"/>

このようなテキストエリアになります。

Safari以外の方のために画像を貼っておくと以下のような形。
角丸テキストエリア
上が通常、下が履歴表示。

残念ながらW3Cおすすめではないらしいですが、W3C原理主義者でない方はぜひお試しください。



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年12月25日 19:27

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介/ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 また、YouTubeのチャンネル登録はこちらからできます。

ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
▼Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
▼TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー