概要
入力フォーム内に透かし文字placeholderを追加したのですが、IOSブラウザで透かし文字の上下の位置がずれて、下の方に表示されてしまいます。Andoroidではきちんと中央に表示されています。
URL以下。
実際のサイト
試したこと。CSSの内の＃nameの{}内のfont-family:の項目を消去すると正しくIOSできちんと中央上下に表示されます。
ただ、font-familyはIOS標準では入力時に文字の種類を変えたいので、fontの種類を指定しています。
placeholderの文字の位置を移動する方法以下URLも試しましたが、上下中央にはなりませんでした。
回答よろしくお願いいたします。
フォーム入力欄のplaceholderの色やスタイルをCSSで変更する方法
iPhone（iOS）のみフォームの透かし文字（Placeholder）を上下中央に変更する方法
html
<!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="reset.css"><!--resetcss--> <title></title><style>/* 画面幅（2000px以下の時までの適応）指定 */@media screen and (max-width: 2000px){ #name { border: 3px solid #40ce03; /* 枠線 */ padding: 0.2em; /* 内側の余白量 */ height: 2.2em; /* 高さ */ font-size: 0.92em; /* フォームの四角の内の表示文字サイズ */ line-height: 1.2; /* 行の高さ */ margin-top: 16px; background-color: white; font-family: "Noto Sans JP", sans-serif;/* IOS IPHONE太字回避の為 */ } }</style> </head> <body> <input type="text" class="name" name="name" id="name" placeholder="例）幸運太郎" value="" /> </body></html>
リセットCSS
reset.css
css
#name{ -moz-appearance: none; -webkit-appearance: none; appearance: none;/* ブラウザの統一*/ border-radius: 0;/* ベンダープレフィックス指定前に値を指定 角0*/ -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0;} /* ---------placeholderも文字色の調節--------- */input::placeholder { color: #9f9f9fc5; font-weight: 300; } /* IOS */ input:-webkit-input-placeholder, textarea:-webkit-input-placeholder { color:#9f9f9fc5; font-weight: 300; }/* IOS */input::-webkit-input-placeholder { color:#9f9f9fc5; font-weight: 300; }
0 コメント