はじめまして。
こちらのページを見ながらページ上にレスポンシブ検索フォームを設置していたのですが、
デベロッパー上で確認したところ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; }
あなたの回答
tips
プレビュー