将 <button> 更改为 <asp:Button> 时丢失 CSS 格式答案

【问题标题】：Loosing CSS format when change <button> to <asp:Button>将 <button> 更改为 <asp:Button> 时丢失 CSS 格式
【发布时间】：2018-01-02 16:29:31
【问题描述】：

我正在为我的网络应用程序使用以下 HTML 和 CSS 设计 - https://codepen.io/andytran/pen/PwoQgO

我需要将按钮标签<button>Login</button>替换为以下内容，

<asp:Button ID="bnLogin" runat="server" Text="Login" OnClick="bnLogin_Click"  />

问题是当我使用 asp:Button 元素而不是 button 元素时，我失去了 CSS 样式。

这里是对应的 HTML -

<div class="form">
    <h2>Login to your account</h2>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtUserID" runat="server" Columns="50"  placeholder="User ID" ></asp:TextBox>
        <asp:TextBox ID="txtUserPassword" runat="server" Columns="50" TextMode="Password" placeholder="Password"></asp:TextBox>
        <asp:Button ID="bnLogin" runat="server" Text="Login" OnClick="bnLogin_Click"  />
        <br />
        <asp:Label ID="lblMsg" ForeColor="red" runat="server" />
    </form>
</div>

以及对应的CSS——

.form-module button {
  cursor: pointer;
  background: #33b5e5;
  width: 100%;
  border: 0;
  padding: 10px 15px;
  color: #ffffff;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.form-module button:hover {
  background: #178ab4;
}

【问题讨论】：

标签： css .net button styles

【解决方案1】：

我认为它会解决你的问题。

.form-module input[type="submit"]{
  cursor: pointer;
  background: #33b5e5;
  width: 100%;
  border: 0;
  padding: 10px 15px;
  color: #ffffff;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.form-module input[type="submit"]:Hover {
  background: #178ab4;
}

【讨论】：

我很高兴听到这个消息 :)

【解决方案2】：

在你的 css 中使用下面的代码

.form-module input[type="submit"]:Hover {
background: #178ab4;
}

而不是

.form-module button:hover {
  background: #178ab4;
}

【讨论】：