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

Question

worldtravel

489

414もっと見る

100pt

ウェブ制作

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

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

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

宜しくお願いします。

回答の条件

1人1回まで

登録：2016/10/14 19:07:06
終了：2016/10/14 21:25:07

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

phplove 2016/10/14 21:09:19

formにaction属性を付けてみてください。
http://qiita.com/usagi-f/items/99c58670ab125dd32cc3
worldtravel 2016/10/14 21:23:42

phplove さん

ありがとうございます。
できました。

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

phplove · Accepted Answer · 2016-10-14T20:04:17+09:00

No.1

phplove2062016/10/14 20:04:17

100pt

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

＜input type="search"＞

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

他4件のコメントを見る

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

2016/10/14 20:28:45

やはりダメでした。

こちらの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>

2016/10/14 20:34:40

> formにaction属性を付けてみてください。

こちらも合わせて書く事で解決しました。
ありがとうございました。

2016/10/14 21:24:20

追記です。

質問とは関係ないのですが、
メモとして残しておきます。
何か解決策があるようでしたら教えて頂ければ幸いです。

type="search" にすると、cssが効かなくなるようです。
入力欄が極度に角丸になってしまうのですが、
cssで角がとがる様に出来ませんでした。。。

border-radius: 2px; くらいにしたいのですが、
強制的に border-radius: 15px; くらいになってしまう感じです。

2016/10/14 21:44:12

border:0px; でborderを消して、ラップする領域にborder-radius指定するような小細工しか思いつきません…

2016/10/16 03:51:30

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

ベストアンサー

phplove2062016/10/14 20:04:17

コメント（2件)

この質問への反応（ブックマークコメント）