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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

解決済

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

ghtew2
ghtew2

総合スコア159

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

3回答

-2評価

2クリップ

143閲覧

投稿2021/12/14 08:06

編集2021/12/14 12:06

年月日と曜日をセレクトボックスで選択するコードを書いているのですが、提示のコードはクロームでしかcss表示されないでしょうか?
例えば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>

付属画像
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

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

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806

2021/12/14 08:50

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

2021/12/14 10:57

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

2021/12/14 11:50

回答ありがとうございます。返信遅くなりました。今、概要も含めて記載いたします。
ghtew2

2021/12/14 12:12

概要が本当の質問なのですが、概要の下に書いたのが、ソースコードです。画像のように表示されちゃんと表示はOKです。ただ、他のブラウザ、firefoxやsafariなどでは、たぶん表示されないと思うのですが、inputを疑似要素にしていますし。今の表示のままで、firefoxやsafariなどでも同じ感じで表示させたいのですが、他にコードが思い浮かばないです。
m.ts10806

2021/12/14 19:40

全員に対して同じ返信されていますが、コメントに答えられてない気がします。 >firefoxダウンロードできないという状況が不明。chromeがなぜできるのか。
ghtew2

2021/12/14 20:17

すみません。警告様なメッセージが出るので、firefoxのダウロードを見送ってます、ただスマホでは、firefoxダウロードしました。
m.ts10806

2021/12/14 20:29

書いてないと分からないですし、その「警告」とは何でしょう。 本当に「警告」なら「本当にいい?」確認だけだと思うのですが。
ghtew2

2021/12/14 20:34

すみません。後で確認してみます。 その時返信致します。
ghtew2

2021/12/15 04:02

ダウウンロードできました。
ghtew2

2021/12/15 09:09

結果を投稿しました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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