Question

当我将其转换为aspx控件时，我的按钮CSS会发生变化。

我希望Aspx Button与HTML按钮相同。

这就是我目前所拥有的：

以下是我的HTML代码：

＆＃13;

@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);
}

＆＃13;

<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>
	
	<section class="container">
	 <section class="login-form">
		<section>
			<img src="images/logo.png" alt="" />
			<h4>Sign in with your Account</h4>
		</section>
		<form method="post" action="" role="login">
			<img src="images/user.png" alt="" />
			<input type="email" name="email" required placeholder="Email" class="form-control input-lg" />
			<input type="password" name="password" required placeholder="Password" class="form-control input-lg" />


			<button type="submit" name="go" class="btn btn-block btn-info">Sign in</button>
			<input type="checkbox" name="remember" value="1" checked /> Stay signed in
			<a href="#" class="pull-right">Need help?</a>
		</form>
		
		</section>
	</section>
	
</body>
</html>

＆＃13;

Answer 1

问题是<input type="button .../>正在渲染html元素，如<button .../>而不是＆＃34;真正的＆＃34; html <input type="button .../>

这就是为什么适用于form[role=login] input {...}的css将是form[role=login] button {...}而不是您期望的form[role=login] button

您有几种可能性：

使用css类：按form[role=login] .btn（按类名选择）替换<button class="btn" .../>（按元素类型选择），然后执行以下操作： <asp:Button CssClass="btn" />和form[role=login] input。缺点：asp:Button css属性未覆盖仍将应用于form[role=login] button {...}
使用css元素选择器：将form[role=login] button, form[role=login] input[type=button] {...}替换为<asp:Button ....>。缺点：与上面相同，您必须覆盖所有css属性
请勿使用asp：按钮：将<button runat="server" ... />替换为runat="server"。这实际上是一个有效的服务器控件由于System.Web.UI.WebControls.Button，但您完全控制渲染，因为它是纯HTML。缺点：在您的代码隐藏中，它会将您的控件类型从System.Web.UI.HtmlControls.HtmlButton更改为interface EmailService<T> { Email buildEmail(T t); }。您可能需要进行一些重构。

如果重构后面的代码不是一个大问题，我会选择解决方案3.我从来不是asp控件的忠实粉丝，因为你无法决定应该渲染什么＆＃34;开箱即用＆＃34;开箱即用＃34 ;.使用解决方案3，您可以编写自己的html，并且仍然使用代码中的一些元素，这适用于所有html元素。

Aspx中的Html按钮CSS更改

1 个答案: