hello guys.. sumasakit ulo ko.. baka pwede nyu ako tulungan,,, pwede nyu po ba lagyan ng kahit DALAWANG RESULTS ung search box... newbie po ako sa css... binigay po sakin ung search code na nasa ibaba... maraming salamat sa sasagot.. bigyan ko nlng kayu ng makunwelo... please heck code below
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="search2-try.css">
</head>
<body>
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
</body>
</html>
<!-- css code
body
/*-------------------------------------*/
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
.cf{
zoom:1;
}
/*-------------------------------------*/
.form-wrapper {
width: 235px;
padding: 15px;
margin: 0px auto 0px auto;
background: #444;
background: rgba(0,0,0,.2);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
.form-wrapper input {
width: 145px;
height: 20px;
padding: 20px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 5px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
-moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
-webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 60px;
font: bold 12px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #42aff7;
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover{
background: #1f8dd6;
}
.form-wrapper button:active,
.form-wrapper button:focus{
background: #0166a8;
}
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #42aff7 transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before{
border-right-color: #1f8dd6;
}
.form-wrapper button:focus:before{
border-right-color: #0166a8;
}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;
}
.byline p{
text-align:center;
color:#c6c6c6;
font: bold 18px Arial, Helvetica, Sans-serif;
text-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.byline p a{
color:#d83c3c;
text-decoration:none;
}
-->