:
HTML code:
<!DOCTYPE HTML><Head><title></title></Head><Body><!--define input boxes and buttons -<inputplaceholder= "keyword"class= "Searchinput"</input><inputtype= "button"class= "Searchbtn"></input><!--Start defining Styles -<style>/*Set the input box style*/. Searchinput{position:Absolute; /*Use absolute positioning*/Margin-left:200px; /*Adjust Position*/width:300px; /*Set Width*/Height:34px; /*Set Height*/padding:2px 10px; /*Inner margin*/font-family:"The song Body"; /*Set Font*/font-size:16px; /*Set Font size*/Border:1px solid #f98e37; /*set border size, style, color*/Border-radius:4px 0 0 4px; /*set four rounded corners of the border*/}/*style when setting input box focus*/. Searchinput:focus{Border-color:#51c6ea;}/*Set Button style*/. Searchbtn{position:Absolute; /*Use absolute positioning*/Margin-left:514px; /*Adjust Position*/width:50px; /*Set Width*/Height:40px; /*Set Height*/Border-style:None; /*Cancel button border style*/Border-radius:0px 9px 9px 0px; /*set four rounded corners of a border*/background:URL (search.png) repeat center;/*Set button background picture, tile, center*/}</style></Body></HTML>
2017-09-29 10:15:42
CSS Combo Design input box and button generate custom keyword query bar