Question

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

我需要使用以下内容替换按钮标记<button>Login</button>

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

问题是当我使用asp：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;
}

Answer 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;
}

Answer 2

在css中使用以下代码

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

而不是

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

将<button>更改为<asp：button>时丢失CSS格式

2 个答案: