firefoxダウンロードできないという状況が不明。chromeがなぜできるのか。
年月日と曜日をセレクトボックスで選択するコードを書いているのですが、提示のコードはクロームでしかｃｓｓ表示されないでしょうか？
例えばfirefoxなどの他のブラウザではcssが効かないようなことが書かれていたのですが、どうでしょうか？
firefoxがダウンロードできないので確かめようがありません。どうでしょうか？
Ulはブラウザ依存、疑似要素はinputには効かないようなことが、掛かれていたような気がします。
javascript
<!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title>Sample</title> <style> #date1 { position: relative; border: 3px solid #63e02d; padding: 0.5em; width: 11.5em; font-size: 1.2em; color: snow; background-color: snow; } #date1::before { position: absolute; left: .2em; color: black; background-color: snow; content: attr(data-date); } </style> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script> $(() => { moment.locale('ja', { weekdays: '日月火水木金土'.split('').map(s => s + '曜日') }); $('#date1').on('change', function() { const v = moment(this.value), f = 'YYYY/MM/DD (dddd)'; this.dataset.date = v.isValid()? v.format(f):'年/月/日'; this.blur(); }).trigger('change'); }); </script> </head> <body> <form action="#" method="post"> <div> <span><strong>第1希望：※</strong></span> <input type="date" id="date1" name="time4" value="" /> </div> <input type="submit" name="submit" value="確認画面へ" /> </form> </body> </html>
概要
セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきちんと表示
され完璧です。
何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示されて満足です。付属画像参考。
しかし、提示のコードではfirefoxなどのブラウザでも表示されるようにしたいのですが、●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままどうコードを書いたら
よいでしょうか？
調べたところjQuery UI の Datepickerなどがあるようですが、調べてコードを書いても意味が分からず何も動きませんでした。
●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると
曜日まで表示される今の状況を維持したままfirefoxなどの他のブラウザでも表示されるようにしたいのですが、どうコードを書いたら
よいでしょうか？
html
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>お問い合わせ</title> <link rel="stylesheet" href="highcoin.css"> <link rel="stylesheet" href="responsivecoin.css"> <link rel="stylesheet" href="reset.css"> <style> /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ } /* 第OO希望の文字自体のデザイン */ .auto-style3 { color: #63E02D; font-size: 22px; /* 文字を大きく */ } /* 日付選択のボックスのデザイン1 */ #input_date1 { vertical-align: middle; box-sizing: border-box; border: 3px solid #63e02d; /* 枠線 */ padding: 0.5em; /* 内側の余白量 */ background-color: snow; /* 背景色 */ width: 15.9em; /* 横幅 */ height: 41px; /* 高さ */ font-size: 1.2em; /* テキスト内の表示文字サイズ */ color: #000000;/* 色 */ line-height: 1.2; /* 行の高さ */ } input.example { position: relative; width: 170px; height: 20px; color: white; } input.example:before { position: absolute; left: 8em; color: black; content: attr(data-date); } input.example::-webkit-datetime-edit-year-field, input.example::-webkit-datetime-edit-month-field, input.example::-webkit-datetime-edit-day-field { } </style> <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script> $(function() { moment.locale('ja', { weekdays: ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'], weekdaysShort: ['日', '月', '火', '水', '木', '金', '土'] }); $('input').on('change', function() { if (moment(this.value).isValid()) { this.setAttribute( 'data-date', moment(this.value).format(this.getAttribute('data-date-format')) ); } else { this.setAttribute('data-date', ); } }).trigger('change'); }); function getValue() { alert($(".example").val()); // 2021-12-10 } </script> </head> <body> <form action="form1.php" method="post"> <div class="auto-style2"> <span class="auto-style3"><strong>第1希望：※</strong></span> <input type="date" id="input_date1" class="example" data-date-format=" (dddd)" name="time4" value="<?php if(isset($time4)){ echo $time4; } ?>" /> </div> <input type="submit" name="submit" value="確認画面へ"> </form> </body> </html>
付属画像
いずれにしても「どうなったら正解（想定）なのか」記載しないと応えようがないのでは。
回答ありがとうございます。返信遅くなりました。今、概要も含めて記載いたします。
概要が本当の質問なのですが、概要の下に書いたのが、ソースコードです。画像のように表示されちゃんと表示はOKです。ただ、他のブラウザ、firefoxやsafariなどでは、たぶん表示されないと思うのですが、inputを疑似要素にしていますし。今の表示のままで、firefoxやsafariなどでも同じ感じで表示させたいのですが、他にコードが思い浮かばないです。
全員に対して同じ返信されていますが、コメントに答えられてない気がします。
>firefoxダウンロードできないという状況が不明。chromeがなぜできるのか。
すみません。警告様なメッセージが出るので、firefoxのダウロードを見送ってます、ただスマホでは、firefoxダウロードしました。
書いてないと分からないですし、その「警告」とは何でしょう。
本当に「警告」なら「本当にいい？」確認だけだと思うのですが。
すみません。後で確認してみます。
その時返信致します。
ダウウンロードできました。
結果を投稿しました。
まだ回答がついていません
会員登録して回答してみよう
