如何在CSS中使type =“ submit”看起來像type =“ button”

Question

我試圖建立一個可以接收和存儲有關人或物信息的網站。 當某人鍵入用戶名並單擊按鈕時，它將找到標有用戶輸入內容的目錄。 如果沒有文件，則轉到錯誤頁面。

我遇到的問題是<input type="button" name="search" value="Search Database">是我希望的外觀，但僅當我將type="button"更改為type="submit"時才type="submit" ，這會更改CSS，因此看起來很有趣。

請幫助我解決按鈕問題，非常感謝。

 <!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>

Answer 1

您缺少form的結束標記。 確保包括在內。 並將您的CSS input['submit']更改為： input[type=submit] ，現在您可以更改HTML按鈕以鍵入Submit。 它應該工作

如何在CSS中使type =“ submit”看起來像type =“ button”

問題描述

1 個解決方案

解決方案1
1 已采納 2015-02-27 05:43:59

如何在CSS中使type =“ submit”看起來像type =“ button”

問題描述

1 個解決方案

解決方案1 1 已采納 2015-02-27 05:43:59

解決方案1
1 已采納 2015-02-27 05:43:59