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

前提

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});

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)

itagagaki

2022/11/27 02:13

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

退会済みユーザー

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件

自己解決

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

投稿2022/11/27 04:28

ff0

総合スコア3