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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

CSS

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

Q&A

解決済

1回答

2379閲覧

IOSブラウザでフォーム内のplaceholderの透かし文字の上下の位置がずれて表示されてしまいます。

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

CSS

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

0グッド

0クリップ

投稿2022/12/12 09:41

編集2022/12/16 05:09

概要
入力フォーム内に透かし文字placeholderを追加したのですが、IOSブラウザで透かし文字の上下の位置がずれて、下の方に表示されてしまいます。Andoroidではきちんと中央に表示されています。

URL以下。

試したこと。CSSの内の#nameの{}内のfont-family:の項目を消去すると正しくIOSできちんと中央上下に表示されます。

ただ、font-familyはIOS標準では入力時に文字の種類を変えたいので、fontの種類を指定しています。
placeholderの文字の位置を移動する方法以下URLも試しましたが、上下中央にはなりませんでした。

回答よろしくお願いいたします。
フォーム入力欄のplaceholderの色やスタイルをCSSで変更する方法

iPhone(iOS)のみフォームの透かし文字(Placeholder)を上下中央に変更する方法

html

1<!DOCTYPE html> 2 3<html lang="ja"> 4 5<head> 6 7<meta content="text/html; charset=utf-8" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <link rel="stylesheet" href="reset.css"><!--resetcss--> 10 <title></title> 11<style> 12 13/* 画面幅(2000px以下の時までの適応)指定 */ 14@media screen and (max-width: 2000px){ 15 16 #name { 17 18 border: 3px solid #40ce03; /* 枠線 */ 19 padding: 0.2em; /* 内側の余白量 */ 20 21 height: 2.2em; /* 高さ */ 22 font-size: 0.92em; /* フォームの四角の内の表示文字サイズ */ 23 line-height: 1.2; /* 行の高さ */ 24 margin-top: 16px; 25 background-color: white; 26 font-family: "Noto Sans JP", sans-serif;/* IOS IPHONE太字回避の為 */ 27 28 29 } 30 } 31</style> 32 33 34</head> 35 36<body> 37 38 39 <input type="text" class="name" name="name" id="name" placeholder="例)幸運太郎" value="" /> 40 41 42 43</body> 44</html> 45

リセットCSS
reset.css

css

1#name{ 2 -moz-appearance: none; 3 -webkit-appearance: none; 4 appearance: none;/* ブラウザの統一*/ 5 border-radius: 0;/* ベンダープレフィックス指定前に値を指定  角0*/ 6 -webkit-border-radius: 0; 7 -moz-border-radius: 0; 8 -o-border-radius: 0; 9 -ms-border-radius: 0; 10} 11 12/* ---------placeholderも文字色の調節--------- */ 13input::placeholder { 14 color: #9f9f9fc5; 15 font-weight: 300; 16 17 18 } 19 20 /* IOS */ 21 input:-webkit-input-placeholder, 22 textarea:-webkit-input-placeholder { 23 color:#9f9f9fc5; 24 font-weight: 300; 25 26 } 27/* IOS */ 28input::-webkit-input-placeholder { 29 color:#9f9f9fc5; 30 font-weight: 300; 31 32}

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

URLを参考にhttps://tomotan.hateblo.jp/entry/web-placeholder-position
と。。。https://www.coder-ao.com/blog/189/を参考に

書き換えて、
以下を追加することで、placeholderの上下の位置を調節できました。

/* Safari Android 青 */
.name::-webkit-input-placeholder{

position: relative;
top: -0.2em;
}
/* Safari Android 青 */
.email::-webkit-input-placeholder{

position: relative;
top: -0.2em;
}

でさらに、以下を加える

/* --------- 最新のsafari用--------- */

_::-webkit-full-page-media, _:future, :root

/* Safari Android 青 */
.name::-webkit-input-placeholder{

position: relative;
top: -0.2em;
}

/* ---------古いsafari用--------- */

@media screen and (-webkit-min-device-pixel-ratio:0) {
::i-block-chrome,

/* Safari Android 青 */
.name::-webkit-input-placeholder{

position: relative;
top: -0.2em;
}
}

投稿2022/12/13 07:40

編集2022/12/15 20:09
ghtew2

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問