プレースホルダを入力と揃えます。<input>

Question

::placeholder疑似要素の左パディングを変更しました。入力テキストをプレースホルダに揃えるのに問題があります。

問題：アイコンからの距離は、入力テキストとプレースホルダテキストの両方で同じにする必要があります。入力テキストはアイコンに対してフラッシュされますが、プレースホルダは正しい位置にあります。

問題のデモと私のコードは以下の通りです：

私のバイオリンへのリンク：https://jsfiddle.net/4jh52b18/1/

ソースコード：

CSS：

#search-overlay { 
    position:absolute; 
    top: 0; 
    left:0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, 0.9); 
    .search-overlay__wrapper { 
    max-width: 752px; 
    margin: 0 auto; 
    margin-top: 160px; 
    } 
    .search-overlay__search-bar { 
    width: 720px; 
    margin: 0 auto; 
    font-size: 35px; 
    font-family: sans-serif; 
    color: black; 
    padding: 20px; 
    border: none; 
    border-bottom: 1px solid gray; 
    background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/28403-200.png") left no-repeat; 
    background-size: 20px; 
    &::placeholder { 
     padding-left: 25px; 
    } 
    @media (max-width: 980px) { 
     width: 100%; 
     margin: 0 auto 
    } 
    } 
    .search-overlay__close { 
    display: inline; 
    vertical-align: middle; 
    @media (max-width: 980px;) { 
     position: absolute; 
     top: 0; 
     right: 0; 
     padding: 24px; 
    } 
    } 
} 

HTML：

ライブjsfiddleの例では、入力テキストが同じ場所に配置する必要があるときに、プレースホルダと揃っていないことがわかります。これを行うための属性は何ですか？私は入力に直接左にパディングを追加しようとしましたが、期待どおりに動作しませんでした。あなたのSCSSで

Answer 1

（ライン23-25）、以下を削除/変更：

&::placeholder { 
    padding-left: 25px; 
} 

SCSSで&は、現在のセレクタを置き換えるので、それが機能しなかった理由があります。

#search-overlay .search-overlay__search-bar::placeholder {...} 

はほとんどの場合、あなたは弱いセレクタを使用し、それが適用されませんでした。そのため&::placeholderはに変換されます。