前提
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
恐縮ですが原因を教えていただければと思います。
回答1件
あなたの回答
tips
プレビュー