質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML

    8683questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5590questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • 検索

    88questions

    検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。

レスポンシブ検索フォーム

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 179
退会済みユーザー

退会済みユーザー

はじめまして。
こちらのページを見ながらページ上にレスポンシブ検索フォームを設置していたのですが、
デベロッパー上で確認したところinputのテキストフォームが潰れていて入力できない状態です。
heghtを設定したりmarginやpaddingを変更したのですが、改善されず全くわかりません。。。
ご教授いただければ幸いです。

 HTML

<form action="***" method="get" accept-charset="Shift_JIS" target="_top">
<dl class="search">
<dt><input type="text" value="" placeholder="キーワードを入力してください" /></dt>
<dd><button><span></span></button></dd>
</dl>
</form>

 CSS

dl.search{
    position:relative;
    background-color:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -o-border-radius:6px;
    -ms-border-radius:6px;
    border-radius:6px;
    margin:20px 10px;
    height:42px;
}
dl.search dt{
    margin-right:40px;
}
dl.search dt input{
    width:100%;
    height:26px;
    line-height:26px;
    background:none;
    border:none;
    margin:8px 0 8px 8px;
}
dl.search dd{
    position:absolute;
    top:0;
    right:0;
}
dl.search dd button{
    display:block;
    padding:10px;
    background:none;
    border:none;
}
dl.search dd button span{
    display:block;
    width:20px;
    height:20px;
    background:url('../img/icon_search_gy.png') no-repeat scroll 0 0;
    background-size:contain;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • mts10806

    2018/06/14 16:03 編集

    提示コードでは再現しないので画面キャプチャなど添付してください。htmlも全体提示されたほうがいいかもしれません。

    キャンセル

  • shinobu_osaka

    2018/06/14 22:06

    再現しませんね…ここに提示した部分だけを入れてもそちらの環境では現象が発生したのですか?(問題の切り分け) そも「デベロッパー上で確認」ってなんでしょうか? 環境も書かないとですよ。

    キャンセル

  • yaschi

    2018/07/15 08:29 編集

    スマホ等でも確認してみましたが再現できませんでした。もし、CSSが反応しないなら<style></style>を使って本文中に入れるか外部CSSとして読み込んでみると案外解決したりします。あと、他の端末で試してみるといいかもしれません。自分の経験からするとスマホ版のChromeでは少しサイズ(?)が異なる傾向があります。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8683questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5590questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • 検索

    88questions

    検索は、あるデータの集まりの中から 目的のデータを見つけ出すことです。