年月日と曜日をセレクトボックスで選択するコードを書いているのですが、提示のコードはクローム限定でしょうか？

年月日と曜日をセレクトボックスで選択するコードを書いているのですが、提示のコードはクロームでしかｃｓｓ表示されないでしょうか？
例えばfirefoxなどの他のブラウザではcssが効かないようなことが書かれていたのですが、どうでしょうか？

firefoxがダウンロードできないので確かめようがありません。どうでしょうか？
Ulはブラウザ依存、疑似要素はinputには効かないようなことが、掛かれていたような気がします。

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta content="text/html; charset=utf-8" />
5<title>Sample</title>
6
7<style>
8#date1 {
9position: relative;
10border: 3px solid #63e02d;
11padding: 0.5em;
12width: 11.5em;
13font-size: 1.2em;
14color: snow;
15background-color: snow;
16}
17#date1::before {
18position: absolute;
19left: .2em;
20color: black;
21background-color: snow;
22content: attr(data-date);
23} 
24</style>
25
26<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
27<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
28
29<script>
30$(() => {
31moment.locale('ja', {
32weekdays: '日月火水木金土'.split('').map(s => s + '曜日')
33});
34$('#date1').on('change', function() {
35const v = moment(this.value), f = 'YYYY/MM/DD (dddd)';
36this.dataset.date = v.isValid()? v.format(f):'年/月/日';
37this.blur();
38}).trigger('change');
39});
40</script> 
41</head>
42<body>
43
44<form action="#" method="post">
45<div>
46<span><strong>第1希望：※</strong></span> 
47<input type="date" id="date1" name="time4" value="" />
48</div>
49<input type="submit" name="submit" value="確認画面へ" />
50</form>
51</body>
52</html>

概要
セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきちんと表示
され完璧です。

何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示されて満足です。付属画像参考。

しかし、提示のコードではfirefoxなどのブラウザでも表示されるようにしたいのですが、●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままどうコードを書いたら
よいでしょうか？

調べたところjQuery UI の Datepickerなどがあるようですが、調べてコードを書いても意味が分からず何も動きませんでした。

●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままfirefoxなどの他のブラウザでも表示されるようにしたいのですが、どうコードを書いたら
よいでしょうか？

html
1<!DOCTYPE html>
2
3<html>
4
5<head>
6	<meta content="text/html; charset=utf-8" />
7	<meta name="viewport" content="width=device-width, initial-scale=1">
8	<title>お問い合わせ</title>
9	<link rel="stylesheet" href="highcoin.css">
10	<link rel="stylesheet" href="responsivecoin.css">
11	<link rel="stylesheet" href="reset.css">
12	
13	<style>
14
15		/* 入力フォームの位置 */
16
17		.auto-style1 {
18
19			text-align: center;
20
21		}
22
23		/* セレクトボックスの位置 */
24		.auto-style2 {
25
26			text-align: center;
27			/* セレクトボックス中央に配置 */
28			
29		}
30
31		/* 第OO希望の文字自体のデザイン */
32		.auto-style3 {
33			color: #63E02D;
34			font-size: 22px;
35			/* 文字を大きく */
36
37
38		}
39/* 日付選択のボックスのデザイン1 */
40#input_date1 {
41    vertical-align: middle; 
42    box-sizing: border-box; 
43border: 3px solid #63e02d;  /* 枠線 */
44    padding: 0.5em;          /* 内側の余白量 */
45    background-color: snow;  /* 背景色 */
46    width: 15.9em;             /* 横幅 */
47    height: 41px;           /* 高さ */
48    font-size: 1.2em;          /* テキスト内の表示文字サイズ */
49    color: #000000;/* 色 */
50    line-height: 1.2;        /* 行の高さ */
51   
52}
53input.example {
54    position: relative;
55    width: 170px;
56    height: 20px;
57    color: white;
58}
59
60input.example:before {
61    position: absolute;
62    left: 8em;
63    color: black;
64    content: attr(data-date);
65	
66}
67
68input.example::-webkit-datetime-edit-year-field,
69input.example::-webkit-datetime-edit-month-field,
70input.example::-webkit-datetime-edit-day-field {
71
72}
73		
74	</style>
75
76<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
77<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
78<script>
79	$(function()
80	{
81		moment.locale('ja', {
82			weekdays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'],
83			weekdaysShort: ['日', '月', '火', '水', '木', '金', '土']
84		});
85 
86		$('input').on('change', function() {
87			if (moment(this.value).isValid())
88			{
89			    this.setAttribute(
90			        'data-date',
91			        moment(this.value).format(this.getAttribute('data-date-format'))
92			    );
93			}
94			else
95			{
96			    this.setAttribute('data-date', );
97			}
98		}).trigger('change');
99	});
100	
101	function getValue()
102	{
103		alert($(".example").val());	// 2021-12-10
104	}
105</script>
106	
107
108</head>
109
110<body>
111	<form action="form1.php" method="post">
112
113    <div class="auto-style2">
114			<span class="auto-style3"><strong>第1希望：※</strong></span>
115
116			
117			<input type="date" id="input_date1" class="example" data-date-format=" (dddd)" name="time4"
118				value="<?php if(isset($time4)){ echo $time4; } ?>" />
119
120                </div>
121
122              <input type="submit" name="submit" value="確認画面へ">
123		
124
125	</form>
126</body>
127
128</html>

付属画像

m.ts10806

2021/12/14 08:50

firefoxダウンロードできないという状況が不明。chromeがなぜできるのか。

m.ts10806

2021/12/14 10:57

いずれにしても「どうなったら正解（想定）なのか」記載しないと応えようがないのでは。

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

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

関連した質問