<input type = "search">スタイリングではない

私はそれの隣に検索アイコンを持つ単純な検索バーを作成しようとしています。しかし、私はタイプ検索で入力をスタイルできないことに気付きました。私はサファリ（バージョン9.0.3（11601.4.4））を試してから、クロム（バージョン49.0.2623.110）を試しました。最初は入力が有効ではありませんでしたが、タイプ検索を行っても問題ないことがわかったからです。<input type = "search">スタイリングではない

私がスタイルを立てられたのは、背景色だけでしたが、それはクロームでしか機能しませんでした。

また、すべてのCSSスタイルを削除して、入力のスタイリングだけを試みました。それは助けになりませんでした。

私はグーグルで成功しませんでした。

私のスタイルを覚えているか、テキストに入力タイプを入れなければなりませんか？

ありがとうございます！

CODE：

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <style> 
     input { 
      padding: 10px; /* Does not work */ 
     } 
    </style> 
</head> 
<body> 
    <input type="search" placeholder="Search"> 
</body> 
</html>

このコードはOS XのSafariとChromeで

EDIT機能しない：私はそれがWebKitのに問題がある可能性がありOS Xを使用していますか？

出典

2016-03-30 Samuel Kodytek

を私達にあなたのあなたのHTMLとCSSのコードと、何を表示しますこれまでに試したことがあります。 –

StackOverflowの上部にある検索ボックスのように、スタイリングされているかのように入力を表示する方法があります。しかし、あなたのコードの例を投稿してください。 –

あなたのhtmlとcssなしで答えることができません。 –

使用appearanceプロパティpropietary stylizingを回避し、あなたがそれをスタイルすることができますする：

input[type=search]{ 
    -moz-appearance: none;/* older firefox */ 
    -webkit-appearance: none; /* safari, chrome */ 
    appearance: none; /* rest */ 
}

さらに詳しい情報：

https://developer.mozilla.org/es/docs/Web/CSS/-moz-appearance

出典

2016-03-30 15:14:28

[OK]を私はgithubのフォーラムを見つけた最後のよう：https://github.com/h5bp/html5-boilerplate/issues/396

は、彼らはSafariでそのバグと書いたと私は自分のスタイルにコードのこの部分を追加する必要があります：

input[type="search"] { 
    -webkit-appearance: textfield; 
}

、それそれを修正！

出典

2016-03-30 15:13:58

あなたは10秒で私を打つ！ LOL –

@ MarcosPrezGude私はあなたの答えを受け入れました：P –

ありがとう、ありがとう。あなたの答えに私のupvote :) –

<input type = "search">スタイリングではない

答えて

関連する問題