bellow is my code that is suppose to create a search box and then style it. For some reason the css properties that I try to give to the box does not apply. I tried having the css in a separate file and also in the script as shown bellow. What is the problem (I'm using netbeans and the file is a .php)
here is the code:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>cats</title>
</head>
<body>
<form>
<input type="text" placeholder="Search me..." required>
<input type="button" value="Search">
</form>
<style type="text/css" media="screen">
form {
width:500px;
margin:50px auto;
}
.Search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
</style>
<?php
// put your code here
?>
</body>
</html>
You are using CSS class selectors. Give the elements you want to style the appropriate class attributes (as alluded to by patricksweeney):
form {
width:500px;
margin:50px auto;
}
.search {
padding:8px 15px;
background:rgba(50, 50, 50, 0.2);
border:0px solid #dbdbdb;
}
.button {
position:relative;
padding:6px 15px;
left:-8px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}<form>
<input type="text" class="search" placeholder="Search me..." required>
<input type="button" class="button" value="Search">
</form></div>