CODEWITHSUNDEEP
htmlcssasp.net
Nicky Liu
Nicky Liu

Reputation: 157

CSS style not work in asp.net Button

i want to make a login page, and i find a template from HERE.

My sample in here.

When i replace the login <button> to <asp:Button>, the css style look like not being applied with this, why? And how to fix it?

There is my html code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="nickydemo.loginstyle.Login" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Dark Login Form</title>
    <meta charset="utf-8" />
  <%--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">--%>
    <link rel="stylesheet" href="css/style.css"/>
    <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <form id="form1" runat="server" class="login">
        <p>
            <label for="login">Email:</label>
            <input type="text" name="login" id="login" value="[email protected]"/>
        </p>

        <p>
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" value="4815162342"/>
        </p>

        <p class="login-submit">
            <%--<button type="submit" class="login-button">Login</button>--%>
            <asp:Button ID="Button1" CssClass="login-button" runat="server" Text="Login" />
        </p>

        <p class="forgot-password"><a href="index.html">Forgot your password?</a></p>
    </form>
</body>
</html>

Upvotes: 1

Views: 4182

Answers (5)

Douwe de Haan
Douwe de Haan

Reputation: 6646

Note that the HTML of the example you provided is different than the one you created.

Example:

<p class="login-submit">
    <input type="submit" name="Button1" value="Login" id="Button1" class="login-button">
</p>

Yours:

<p class="login-submit">
  <button type="submit" class="login-button">Login</button>
</p>

The example uses the :before and :after of the button to get the blue background, which the input does not have. So either you have to force it to be a button, or you can create a div or some other element around your input to get this result.

Edit:

Try this:

<div class="login-submit">
    <div class="login-button">
        <input type="submit" class=""></input>
    </div>    
</div>

and change the padding of .login-button (line 213 of style.css) to padding: 0px;

Second edit: Delete the part of the .login-button:before (line 232 of style.css) and add the following:

input#Button1 {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    background: #00a2d3;
    border-radius: 24px;
    background-image: -webkit-linear-gradient(top, #00a2d3, #0d7796);
    background-image: -moz-linear-gradient(top, #00a2d3, #0d7796);
    background-image: -o-linear-gradient(top, #00a2d3, #0d7796);
    background-image: linear-gradient(to bottom, #00a2d3, #0d7796);
    -webkit-box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
    box-shadow: inset 0 0 0 1px #00a2d3, 0 0 0 5px rgba(0, 0, 0, 0.16);
    z-index: 2;
    width: 38px;
    display: block;
    color: transparent;
    border: none;
}

Upvotes: 1

Glenn Ferrie
Glenn Ferrie

Reputation: 10390

I think the problem is rooted in difference between input and button, specifically regarding how CSS pseudo-elements behave.

Here is a jsfiddle showing how the :before pseudo-element behaves differently across two seemingly identical elements.

The :before is applied to the button, but not the input.

https://jsfiddle.net/qcspe9qm/

I would suggest just leaving your HTML button in place and onclick: 

<button onclick="javascript:document.forms[0].submit();" >Login</button>

something like that.

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

:before and :after render inside a container

Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered are within the container itself as a child element. input can not contain other elements hence they're not supported. A button on the other hand that's also a form element supports them, because it's a container of other sub-elements.

Refer this SO Answer

Upvotes: 2

John Mc
John Mc

Reputation: 2933

The webforms ASP.net Button is creating the button using:

<input type="submit">

your given example the button is rendered using:

 <button type="submit">.

They will function the same, but I suspect that there's CSS targeting button instead of input and that's the problem.

How does it look if you comment out the ASP.net button and add in the button using the tag?

Upvotes: 0

odedta
odedta

Reputation: 2478

You can assign a class to your ASP.NET Button and then apply the desired style to it.

<asp:Button class="mybtn" Text="Button" runat="server"></asp:Button>

.mybtn
{
   border:1px solid Red;
   //some more styles
}

EDIT: Try using display: none or !important for that class to see if it has any effect.

Upvotes: 0

Related Questions