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

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

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

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

Q&A

解決済

1回答

2898閲覧

リセットcssを入れたらチェックボックスが表示されなくなりました

sengoku38

総合スコア27

CSS

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

0グッド

0クリップ

投稿2022/07/17 13:24

編集2022/07/19 20:27

前提

LaravelでWebページを作る勉強をしようとしております。

フロント技術は全くの素人で恐縮ですが、調べてリセットCSSを導入してみました。
導入したリセットCSSはGitHubのをいただきました。
リセットCSS
そうしたところ、チェックボックスが表示されなくなりました。

チェックボックスが出ない

実現したいこと

  • チェックボックスを表示したい

該当のソースコード

ネットで調べて色々書いてみたのですがダメです。
調べてinput[type=checkbox] をいじっているのですがブラウザで0x0となってしまいます。
うまくいかないのは「ログインを保持する」のチェックボックスです。

html

1<!DOCTYPE html> 2<html lang="ja" prefix="og: http://ogp.me/ns#"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="robots" content=" noindex "> 7 <meta name="description" content="詳細"> 8 <link rel="shortcut icon" href="favicon.ico"> 9 <link rel="canonical" href="http://192.168.33.10/admin"> 10 <title>タイトル</title> 11 <meta property="og:title" content="タイトル"> 12 <meta property="og:description" content="詳細"> 13 <meta property="og:type" content="website"> 14 <meta property="og:site_name" content="Laravel"> 15 <meta property="og:url" content="http://192.168.33.10/admin"> 16 17 <link rel="stylesheet" href="css/admin/login.css"> 18</head> 19<body> 20 <div id="app"> 21 <div class="center logo"> 22 <img src="storage/site/banner.png" alt="ロゴ画像"> 23 </div> 24 <div class="center"> 25 <form method="post" action="http://192.168.33.10/admin/top/login"> 26 <input type="hidden" name="_token" value="gNAVOkep35XSN61k4E9DKv6gEJGYptgS50qMSFHm"> <div class="item"> 27 <input class="field" type="number" name="id" required value="" placeholder="ID"> 28 </div> 29 <div class="item"> 30 <input class="field" type="text" name="password" required value="" placeholder="password"> 31 </div> 32 <div class="item"> 33 <label for="keep">ログインを保持する</label><input type="checkbox" name="keep" id="keep" value="1" checked> 34 </div> 35 <input class="button" type="submit"> 36 </form> 37 </div> 38 </div> 39 <script src="js/app.js" defer></script> 40</body> 41</html>

css

1@charset "utf-8"; 2input[type=text], input[type=email], input[type=tel], input[type=number] { 3 border: solid 1px; 4 border-color: silver; 5} 6 7input[type=checkbox] { 8 box-sizing: border-box; 9 cursor: pointer; 10 display: inline-block; 11 width: auto; 12 margin: 0.4rem; 13 transform: scale(2); 14} 15 16div.center { 17 text-align: center; 18} 19 20div.logo { 21 margin-bottom: 200px; 22} 23 24div.item { 25 margin-bottom: 10px; 26} 27 28input.field { 29 text-align: left; 30}

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

  • Laravel 9
  • Firefox 102

恐縮ですが原因を教えていただければと思います。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/07/17 19:28

HTMLも本文全て提示してください。 他者がコピペで現象再現できるようご配慮願います。 Laravel関係なく静的HTMLだけで再現できた方がありがたいので、 HTMLはテンプレートのものではなくブラウザに表示されたHTMLソースを提示してください。
sengoku38

2022/07/18 05:55

すみません、肝心のHTMLを載せておりませんでした。 修正しました。 cssも切り取ったのを載せてしまったのですべて記載しました。 お手数をおかけしますが、よろしくお願いいたします。
guest

回答1

0

ベストアンサー

調べてinput[type=checkbox] をいじっているのですがブラウザで0x0となってしまいます。

 0x0となっているのは、width height が指定されていないからです。

 どのような表示にしたいのかわからないのですが、たとえば以下のようにすれば四角で表示されると思いますので、ここからスタイルをつけていってはどうですか?

css

1input[type="checkbox"] { 2 width: 10px; 3 height: 10px; 4 border: 1px solid; 5}

 蛇足ですが、ブラウザのデフォルト表示に戻すだけあれば、ドキュメントに書かれているとおりにall: revert;で大丈夫でした。

投稿2022/07/19 02:40

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sengoku38

2022/07/19 11:27

回答ありがとうございました。 前職でコーダーさんがリセットCSSを導入してるのでなんとなく入れたのですが、 わからないまま入れるのは良くないですね。 とても勉強になりました! ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問