I have been struggling with styling an input element using CSS. Design is not my forte. I am attempting to achieve something like this:
https://i.sstatic.net/V81PI.jpg
My input field is housed within a form inside a list item:
<li>
<FORM class="searchform" NAME="Search" ACTION="./index.cfm?P=128" METHOD=POST >
<INPUT type="text" name=search value="" STYLE="color: #676767; background-color: #282828; line-height: 18px" size="10" maxlength="40" Placeholder="search">
<INPUT class="search_button" TYPE=SUBMIT NAME="SubmitButton1" VALUE="Search" ID="SubmitButton1">
</FORM></li>
This is how I have styled it with CSS:
@import url(http://fonts.googleapis.com/css?family=Montserrat);
body, html {height: 100%; margin: 0; font-size:16px;}
body {font-family: Arial;}
<header {width: 100%; background-image: url('img/top-bg.png'); background-repeat: repeat-x; background-color: #dfebf2; position: fixed; height: 70px; z-index:2;}
aside {width: 270px; min-height: 100%; position: fixed; background-color: #dfebf2; left: 0; max-height: 100%; overflow-y: auto; /* border-right: 1px solid #bdcada; */}
section {top: 70px; left: 270px; position: absolute;}
h3 {font-family: 'Montserrat', Arial; text-transform: uppercase;font-size:15px;}
select {width: 230px; height: 34px; border: 1px solid #bdcada; font-size: 14px; font-weight: bold; margin: 10px 0 0 0; padding-left: 8px; border-radius: 3px;}
/* Other CSS styles... */
input.search_button {
color: black;
line-height: 23px;
font-weight: bold;
font-size: 10px;
font-family: 'Montserrat', Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 20em;
height: 2em;
}
.height-112px {height: 112px;}
#logo-box {float: left; margin-left: 20px; margin-top:10px; width: 250px;}
/* More CSS styles... */
However, the alignment of my search button in relation to my list item is off. The current outcome looks like this:
https://i.sstatic.net/mZyyJ.jpg
Any suggestions on what I might be doing incorrectly?
Thank you