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

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

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

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

解決済

PCだとHTML input 黒丸が表示されないバグ

ff0
ff0

総合スコア3

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

1回答

0グッド

0クリップ

207閲覧

投稿2022/11/26 17:36

前提

ConohaVPSを借りてwebサイト開発を行なっていて、
現在ログインフォームを作っています。それと、自分はajax通信を使っていて、構造が以下のようになってます。
構造
index.html <- ajax通信(非同期通信)でlogin.htmlをここで表示させている
login.html

実現したいこと

PCでもinputの黒丸の色を変える
inputの文字を表示させる

発生している問題・エラーメッセージ

以前、index.htmlのcssに黒丸(パスワードの文字を隠すときに使う丸)の色を変えるコードを記述し、iOSだけは変えることができましたが、パソコンは私の記憶が正しければ、それ以降色を変えるどころか文字すら表示されなくなりました。

該当のソースコード

index.html

HTML

1<body> 2 <div class="result"> 3 <input type="button" class="button" value="button"> 4 </div> 5</body>

CSS

1body{ 2 margin: 0; 3} 4/*iOS用のコード iOSだと何故かlogin.htmlのcssが効かない所がある*/ 5input { 6 -webkit-border-radius : 0; 7 -webkit-tap-highlight-color : rgba(0,0,0,0); 8 /*iOS用黒丸の色を変えるコード*/ 9 appearance: none; 10 color: green; 11 -webkit-appearance: none; 12 -moz-appearance: none; 13} 14.submit input { 15 width: 70px; 16 height: 30px; 17 padding: 0px 0px; 18} 19.result { 20 position: 0px; 21 margin: 0px; 22 width: 100%; 23 height: 100%; 24}

javascript

1$(function(){ 2 $('.button').click(function(){ 3 $.ajax({ 4 url: 'login.html', 5 type: 'GET', 6 dataType: 'html' 7 }).done(function(data){ 8 $('.result').html(data); 9 10 }).fail(function(data){ 11 alert('通信失敗!'); 12 13 }); 14 }); 15});

login.html

HTML

1<form action="login.php" method="POST"> 2 <div class="login"> 3 <input type="text" name="userid" placeholder="UserID" pattern="[a-zA-Z0-9]+" required></input> 4 </div> 5 <div class="login"> 6 <input type="text" name="password" placeholder="Password" pattern="[a-zA-Z0-9]+" required oncopy="return false" style="-webkit-text-security:disc;"></input> 7 </div> 8 <div class="submit"> 9 <input name="login" type="submit" value="Login"></input> 10 </div> 11</form> 12

CSS

1.background { 2 width: 100%; 3 height: 100%; 4 margin: 0; 5 padding: 0; 6 background-color: blue; 7} 8.form { 9 width: 400px; 10 height: 500px; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 margin: -250px 0 0 -200px; 15} 16.form h1 { 17 font-family: 'myfont'; 18 font-size: 72px; 19 color: red; 20 text-align: center; 21} 22.login { 23 margin: 10px auto; 24 text-align: center; 25} 26input { 27 /*黒丸の色を変更するコード*/ 28 appearance: none; 29 color: red; 30 -webkit-appearance: none; 31 -moz-appearance: none; 32 /*普通のコード*/ 33 background: transparent; 34 border: 2px solid red; 35 font-family: 'myfont'; 36 font-size: 20px; 37 outline : none; 38} 39::placeholder { 40 color: red; 41} 42::value { 43 color: red; 44} 45.login input { 46 width: 250px; 47 height: 30px; 48} 49.submit { 50 margin: 10px auto; 51 text-align: center; 52} 53.submit input { 54 width: 70px; 55 height: 30px; 56 padding: 0px 0px; 57}

試したこと

iOSなどではできていたのではパソコン自体の問題かと思い、chromeやsafariで試したり、キャッシュを消してみたりしても無理でした。
index.htmlのcssコードが原因かと思い、色々いじってみてもだめ、
最終的にtype="password"を記事で見つけたtextでも文字を黒丸にするという方法を使ってみたがだめでした。

補足情報(FW/ツールのバージョンなど)

ConohaVPS CentOS stream9
Safari Version 16.0
Chrome Version 107.0.5304.110 (Official Build) (x86_64)

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

itagagaki

2022/11/27 02:13

問題を再現できませんでした。
SurferOnWww

2022/11/27 02:24

> パソコンは私の記憶が正しければ、 記憶ではなくて、今実際に試してどうなるか確認しませんか?  そのパソコンって何ですか? OS は? Windows? Mac? その他?
archiver

2022/11/27 02:31 編集

どこまでの挙動を求めているかわかりませんが、下記のページの「CSSでinput type="password"を整える」に掲載のコードで、パスワード入力時の黒丸の色は変えられましたよ(CSSの中身はcolor : redだけにして)。 (もしかすると、もう拝見してるかもしれませんが) https://shu-naka-blog.com/html/type-password/ ChromeとFirefoxで確認しました。ただ、Firefoxだとplaceholderで指定した文字の色も変わりましたが。

回答1

1

自己解決

申し訳ございません。自分の下調べが甘かったです。
コメントを見て、再度調べてみた所、input[type="password"]がなぜ文字すら表示されなかったかというと、font-familyでマイフォントを指定していたからのようです。なぜマイフォントを指定すると表示されなくなるのかは不明です。実際iOSでは何の問題もなく表示されてますし...ですので、input[type="password]の部分だけマイフォントを指定しないようにしたら解決できました。

投稿2022/11/27 04:28

ff0

総合スコア3

penguin520👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

VPS

VPS(バーチャル・プライベート・サーバ)は、仮想化されたサーバをレンタルするサービスで、共有サーバでありながら専門サーバと同等の機能を果たします。物理的な専門サーバより安価で提供できるメリットがあります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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