I am trying to create a web page for my school project. For that, I am implementing some designs ? find on youtube. But while I was trying to create a check box ? faced an error. I am certain that I linked the CSS file correctly because other elements are being updated
it is a bit long but since I don't know which part is required ? am posting whole file.
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #AA9ABA;
}
a{
text-decoration: none;
}
.profile{
position: absolute;
width: 100%;
height: 60px;
top: 0;
background-color: #000;
}
.profile .prf{
width: 200px;
height: 50px;
right: 10px;
}
.profile .prf .icon{
position: relative;
left: 10%;
}
.container{
position: relative;
width: 1480px;
height: 510px;
margin: 100px auto;
}
.container .box{
position: relative;
width: 460px;
height: 500px;
background-image: url("img/sky.jpg");
background-repeat: no-repeat;
float: left;
margin: 15px;
box-sizing: border-box;
overflow: hidden;
border-radius: 10px;
}
.container .box .icon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
background: #e0dfd5;
transition: 0.5s;
z-index: 1;
color: #e0dfd5;
}
.container .box .icon .fa{
position: absolute;
top: 45px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
transition: 0.5s;
color: #313;
}
.container .box .content{
position: relative;
height: 100%
left: 50%;
top: 100px;
padding: 20px;
box-sizing: border-box;
transition: 0.5s;
}
p{
position: relative;
left: 40%;
}
select{
position: relative;
left: 22%;
background: #D1ABAD;
padding: 10px;
width: 250px;
height: 50px;
border: none;
font-size: 20px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
input{
position: relative;
left: 22%;
background: #D1ABAD;
padding: 10px;
width: 230px;
height: 30px;
border: none;
font-size: 20px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}
.btn{
left: 35%;
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family: "montserrat";
cursor: pointer;
margin: 10px;
transition: 0.5s;
position: relative;
overflow: hidden;
}
.btn1{
color: #3498db;
}
.btn1:hover{
color: #fff;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.5s;
}
.btn1::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn1:hover::before{
height: 180%;
}
.btn_p{
font-family: arial;
text-transform: uppercase;
font-size: 30px;
width: 240px;
height: 50px;
border-radius: 80px;
line-height: 60px;
text-align: center;
border: 3px solid #009688;
display: block;
}
.btn_p .icon{
position: absolute;
top: 30%;
}
.profile .right_side{
position: absolute;
right: 5%;
top: 5px;
}
label{
position: relative;
color: #01cc65;
font-family: 'Poppins', sans-serif;
font-size: 10px;
border: 2px solid #01cc65;
border-radius: 5px;
padding: 10px 50px;
}
label:before{
content: "";
height: 30px;
width: 30px;
border: 3px solid #01cc65;
border-radius: 50%;
margin-right: 20px;
}
input[type="radio"]:checked + label{
background-color: #01cc65;
}
<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
<link rel="stylesheet" type="text/css" href="style_main_page.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="profile">
<div class="left_side">
<a href="account.php" class="btn_p"><i class="fa fa-user" aria-hidden="true"></i></a>
</div>
</div>
<div class="container">
<form action="searchflight.php" method = "POST">
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<p style="color:#8783D1">FROM:</p>
<select name = "startpoint">
<?php
include "config.php";
$sql_command = "SELECT DISTINCT ticket.startpoint FROM ticket";
$myresult = mysqli_query($db, $sql_command);
while ($start_row = $myresult->fetch_assoc())
{
$startpoint = $start_row['startpoint'];
echo "<option value =$startpoint>".$startpoint."</option>";
}
?>
</select>
<p style="color:#8783D1 ">TO:</p>
<select name = "endpoint">
<?php
include "config.php";
$sql_command2 = "SELECT DISTINCT ticket.destination FROM ticket";
$myresult2 = mysqli_query($db, $sql_command2);
while ($end_row = $myresult2->fetch_assoc())
{
$destination = $end_row['destination'];
echo "<option value =$destination>".$destination."</option>";
}
?>
</select>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<p style="color:#8783D1">PRICE INTERVAL:</p>
<input type="number" name="min_price" min="0" placeholder="Min" required>
<br><br><br><br>
<input type="number" name="max_price" min="0" placeholder="Max" required>
<br>
<input type="radio" id="asc" name="order" value="ASC" style="width: 30px; top: 5px; display: none;">
<label for="asc"><strong>ASC</strong></label>
<br>
<label for="desc"class="ordered"><strong>DESC</strong></label>
<input type="radio" id="desc" name="order" value="DESC" style="width: 30px; top: 5px; display: none;">
<br>
<button class="btn btn1"> Submit </button>
</div>
</div>
<div class="box">
<div class="icon">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="content">
<p style="color:#8783D1 ">Date INTERVAL:</p>
<input type="date" name="date_start" required>
<br><br><br><br>
<input type="date" name="date_end" required>
</div>
</div>
</form>
</div>
</body>
</html>
question from:
https://stackoverflow.com/questions/65642039/%c4%b1-can-not-edit-an-html-element-from-external-css-file 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
