How can I make a type=“submit” look in css like a type=“button”
Question
Im trying to make a website that takes and stores info on people or things. When someone type in a username and click the button is clicked it finds the directory labeled what the user imputed. If there is no file it goes to an error page.
The problem i'm having is <input type="button" name="search" value="Search Database"> is how i want it to look but it only submits if i change type="button" to type="submit" and this changes the css so it looks funny.
Please help me fix the button problem Thanks, I really appreciate it.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Genetics Database</title> <style> @import url(http://fonts.googleapis.com/css?family=Exo:100,200,400); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300); body{ margin: 0; padding: 0; background: #fff; color: #fff; font-family: Arial; font-size: 12px; } .body{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; background-image: url(http://ginva.com/wp-content/uploads/2012/07/city-skyline-wallpapers-008.jpg); background-size: cover; -webkit-filter: blur(5px); z-index: 0; } .grad{ position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */ z-index: 1; opacity: 0.7; } .header{ position: absolute; top: calc(50% - 40px); left: calc(50% - 270px); z-index: 2; } .header div{ float: left; color: #fff; font-family: 'Exo', sans-serif; font-size: 35px; font-weight: 200; } .header div span{ color: #5379fa !important; } .login{ position: absolute; top: calc(50% - 75px); left: calc(50% - 50px); height: 150px; width: 350px; padding: 10px; z-index: 2; } .login input[type=text]{ width: 250px; height: 30px; background: transparent; border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; color: #fff; font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 400; padding: 4px; } .login input[type=password]{ width: 250px; height: 30px; background: transparent; border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; color: #fff; font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 400; padding: 4px; margin-top: 10px; } .login input[type=button]{ width: 260px; height: 35px; background: #fff; border: 1px solid #fff; cursor: pointer; border-radius: 2px; color: #a18d6c; font-family: 'Exo', sans-serif; font-size: 16px; font-weight: 400; padding: 6px; margin-top: 10px; } .login input[type=button]:hover{ opacity: 0.8; } .login input[type=button]:active{ opacity: 0.6; } .login input[type=text]:focus{ outline: none; border: 1px solid rgba(255,255,255,0.9); } .login input[type=password]:focus{ outline: none; border: 1px solid rgba(255,255,255,0.9); } .login input[type=button]:focus{ outline: none; } ::-webkit-input-placeholder{ color: rgba(255,255,255,0.6); } ::-moz-input-placeholder{ color: rgba(255,255,255,0.6); } </style> <script src="js/prefixfree.min.js"></script> </head> <body> <div class="body"></div> <div class="grad"></div> <div class="header"> <div>YouR<span>Genetics</span></div> <br> <div> Database</div> </div> <br> <form action="/database/search.php" method="post"> <div class="login"> <br><br> <input type="text" name="userinfo" placeholder="Username/Keyword" ><br> <input type="button" name="search" value="Search Database"> </div> <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script> </body> </html>
1 answers
solution1
1 ACCPTED 2015-02-27 05:43:59
You're missing the closing tag of your form . Make sure you include that. And change your CSS input['submit'] to this: input[type=submit] , now you can change your HTML button to type submit. It should work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.