Html按鈕CSS更改爲Aspx

當我將它轉換爲aspx控件時，我的按鈕CSS發生了變化。Html按鈕CSS更改爲Aspx

我希望Aspx Button與HTML按鈕相同。

這是我目前有：

下面是我的HTML代碼：

@CHARSET "UTF-8"; 
 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    outline: none; 
 
} 
 

 
.login-form { 
 
    margin: 50px auto; 
 
    max-width: 360px; 
 
} 
 

 
.login-form>section { 
 
    text-align: center; 
 
    margin-top: 15px; 
 
} 
 

 
.login-form>section img { 
 
    margin-bottom: 20px; 
 
} 
 

 
.login-form>section a { 
 
    color: #657fed; 
 
} 
 

 
.login-form h4 { 
 
    font-weight: normal; 
 
    font-size: 20px; 
 
    color: #737373; 
 
    margin-bottom: 20px; 
 
} 
 

 
form[role=login] { 
 
    font: 15px/2.2em Lato, serif; 
 
    color: #555; 
 
    background: #f7f7f7; 
 
    padding: 40px; 
 
    -webkit-box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.2); 
 
    -moz-box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.2); 
 
    box-shadow: 0 3px 3px 0 rgba(50, 50, 50, 0.2); 
 
} 
 

 
form[role=login] img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    margin-bottom: 25px; 
 
} 
 

 
form[role=login] input, 
 
form[role=login] button { 
 
    font-size: 17px; 
 
} 
 

 
form[role=login] input { 
 
    color: #989898; 
 
    background: #fff; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    -webkit-border-radius: 0; 
 
    box-shadow: none; 
 
    margin: 0; 
 
    position: relative; 
 
    z-index: 999; 
 
} 
 

 
form[role=login] input:focus { 
 
    z-index: 1000; 
 
} 
 

 
form[role=login] input[type=email] { 
 
    margin-bottom: -1px; 
 
} 
 

 
form[role=login] input::-webkit-input-placeholder { 
 
    /*color: #c0c0c0;*/ 
 
    color: #c0c0c0 
 
} 
 

 
form[role=login] input:-moz-placeholder { 
 
    color: #c0c0c0; 
 
} 
 

 
form[role=login] input::-moz-placeholder { 
 
    color: #c0c0c0; 
 
} 
 

 
form[role=login] input:-ms-input-placeholder { 
 
    color: #c0c0c0; 
 
} 
 

 
form[role=login] button { 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-shadow: 1px 1px 1px #4082ef; 
 
    border: 1px solid #3b88c3; 
 
    background: #52a6e6; 
 
    margin-top: 15px; 
 
    margin-bottom: 8px; 
 
    -webkit-box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, .3); 
 
    -moz-box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, .3); 
 
    box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, .3); 
 
}

<html> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=1,initial-scale=1,user-scalable=1" /> 
 
    <title>Insert title here</title> 
 
    <!-- Custom CSS --> 
 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    <link href="StyleSheet.css" rel="stylesheet" /> 
 
    <!-- Google Font --> 
 
    <link href="http://fonts.googleapis.com/css?family=Lato:100italic,100,300italic,300,400italic,400,700italic,700,900italic,900" rel="stylesheet" type="text/css"> 
 
    <!-- Bootstrap Core CSS --> 
 
    <link type="text/css" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    <!-- jQuery Library --> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
    <!-- Bootstrap Core JS --> 
 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
\t 
 
\t <section class="container"> 
 
\t <section class="login-form"> 
 
\t \t <section> 
 
\t \t \t <img src="images/logo.png" alt="" /> 
 
\t \t \t <h4>Sign in with your Account</h4> 
 
\t \t </section> 
 
\t \t <form method="post" action="" role="login"> 
 
\t \t \t <img src="images/user.png" alt="" /> 
 
\t \t \t <input type="email" name="email" required placeholder="Email" class="form-control input-lg" /> 
 
\t \t \t <input type="password" name="password" required placeholder="Password" class="form-control input-lg" /> 
 

 

 
\t \t \t <button type="submit" name="go" class="btn btn-block btn-info">Sign in</button> 
 
\t \t \t <input type="checkbox" name="remember" value="1" checked /> Stay signed in 
 
\t \t \t <a href="#" class="pull-right">Need help?</a> 
 
\t \t </form> 
 
\t \t 
 
\t \t </section> 
 
\t </section> 
 
\t 
 
</body> 
 
</html>

來源

2017-10-08 Asim Liaqat

把最終的HTML/CSS代碼，而不是asp代碼...也確信有添加CSS應用到您的按鈕，即使他們有相同的類 –

沒有沒有額外的css.I從http： //www.bootstrapzen.com/preview/203/，我只是希望該按鈕與aspx –

是一樣的，但由於兩個按鈕看起來不一樣，這意味着它們沒有完全相同的CSS。 –

的問題是，<asp:button>被渲染HTML元素像<input type="button .../>而不是「真正的」html <button .../>

這就是爲什麼應用到您的<input type="button .../>將form[role=login] input {...}，而不是你期望一個CSS：form[role=login] button {...}

您有幾種可能性：

使用CSS類：更換form[role=login] button（這是按元素類型選擇）form[role=login] .btn（按類名選擇），然後執行： <button class="btn" .../>和<asp:Button CssClass="btn" />。缺點：form[role=login] input CSS屬性未覆蓋仍然會被應用到asp:Button
使用CSS元素選擇：由form[role=login] button, form[role=login] input[type=button] {...}更換form[role=login] button {...}。缺點：與上面相同，您必須覆蓋所有css屬性
不要使用asp：按鈕：用<button runat="server" ... />替換<asp:Button ....>。由於runat="server"，這實際上是有效的服務器控件，但是您完全控制了呈現，因爲它是純html。缺點：在您的代碼隱藏中，它會將控件的類型從System.Web.UI.WebControls.Button更改爲System.Web.UI.HtmlControls.HtmlButton。你可能需要一些重構。

如果重構背後的代碼不是一個大問題，我會去找解決方案3.我從來不是asp控件的狂熱粉絲，因爲你不能決定什麼應該是「開箱即用」。有了解決方案3，您可以編寫自己的html，並且仍然使用代碼背後的一些元素，並且這適用於所有html元素。

來源

2017-10-10 06:34:26 Mikado68

Html按鈕CSS更改爲Aspx

回答

相關問題