人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

iPhone用の html? css? js? について。

自分のサイトに検索フォームを設置した際、
添付画像の様に右下のタップ部分を「検索」にする方法を教えて下さい。

普通にフォームを設置すると「改行」になってしまいます。

宜しくお願いします。

1476439626
●拡大する

●質問者: worldtravel
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● phplove
●100ポイント ベストアンサー

HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | Developers.IO
http://dev.classmethod.jp/ria/html5/mobile-html5-form/

<input type="search">


でどうぞ。<>を全角にしないとフォームになってしまう‥


phploveさんのコメント
<input type="search"/>

worldtravelさんのコメント
ありがとうございます。 これは先程やってみたのですがなりませんでした。 もう一度チェックしてみます。

worldtravelさんのコメント
やはりダメでした。 こちらのhtmlで試しています。 >|| <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form><input type="search" name="hoge" value=""></form> </body> </html> ||<

worldtravelさんのコメント
> formにaction属性を付けてみてください。 こちらも合わせて書く事で解決しました。 ありがとうございました。

worldtravelさんのコメント
追記です。 質問とは関係ないのですが、 メモとして残しておきます。 何か解決策があるようでしたら教えて頂ければ幸いです。 type="search" にすると、cssが効かなくなるようです。 入力欄が極度に角丸になってしまうのですが、 cssで角がとがる様に出来ませんでした。。。 border-radius: 2px; くらいにしたいのですが、 強制的に border-radius: 15px; くらいになってしまう感じです。

phploveさんのコメント
border:0px; でborderを消して、ラップする領域にborder-radius指定するような小細工しか思いつきません…
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ