How to add multiple css to textbox

Reply

Uruse1980

Member

10 Points

16 Posts

How to add multiple css to textbox

Dec 01, 2020 11:14 PM|Uruse1980|LINK

Hi!

I have this css code (generated thanks to https://www.html-code-generator.com):

<style>
.row span {
    position: relative;
    display: inline-block;
    margin: 11px 15px;
}
.textbox {
    display: inline-block;
    width: 215px;
    padding: 11px 0 11px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 70px;
    transition: all .3s ease-in-out;
    border: solid 1px #ccc;

}
.textbox::-webkit-input-placeholder {
    color: #efefef;
    text-indent: 0;
    font-weight: 300;
}
.textbox + label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
    background: #f3ce41;
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.textbox:focus,
.textboxe:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

}
.textbox:focus::-webkit-input-placeholder,
.textbox:active::-webkit-input-placeholder {
    color: #aaa;
}
.textbox:focus + label,
.textbox:active + label {
    transform: translateX(-100%);
}
</style>

if i create a button like this, all works ok:

<div class="row">
  <span>
    <input class="textbox" type="text" placeholder="Your best name" /><label for="name">Name</label>
  </span>
</div>

In my aspx page i have this textbox:

<asp:TextBox ID="txtemail"  runat="server" Height="30px" Width="250px"></asp:TextBox>

How to add the previous css to my textbox? I tried with these solutions:

CssClass="row"

CssClass="textbox "

CssClass="textboxe"

BUT dont work!

Thanks at all

Reply

yij sun

Contributor

3730 Points

1420 Posts

Re: How to add multiple css to textbox

Dec 02, 2020 02:06 AM|yij sun|LINK

Hi Uruse1980,

Accroding to you description,as far as I think,you could do like this:

            <asp:TextBox ID="txtemail" runat="server" Height="30px" Width="250px" CssClass="row textbox textboxe"></asp:TextBox>

Result:

Best regards,

Yijing Sun

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

ifour.parth@...

Member

70 Points

79 Posts

Re: How to add multiple css to textbox

Dec 02, 2020 03:46 AM|ifour.parth@gmail.com|LINK

You can also add jquery and their css

<style>
        .backgroundColor {
            background-color: red;
        }
        .textColor {
            color: blue;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input").click(function () {
                $("#txtemail").addClass("backgroundColor");
                $("#txtemail").addClass("textColor");
                
            });
        });
    </script>

Blockchain software companies india
http://www.ifourtechnolab.com/blockchain-technology

Reply

Uruse1980

Member

10 Points

16 Posts

Re: How to add multiple css to textbox

Dec 04, 2020 08:48 PM|Uruse1980|LINK

Hi! Thanks for your help!

Unfortunately the effect that you have posted it is not the correct effect. The correct textbox can be found here:

https://www.html-code-generator.com/css/textbox-style

is the number 78 on page 4

Thanks!

Reply

PaulTheSmith

Participant

1620 Points

927 Posts

Re: How to add multiple css to textbox

Dec 05, 2020 05:09 AM|PaulTheSmith|LINK

The sample you link to has both an input control and a label element. The markup you have shown only has an input. Where is your label? You are not going to get the desired label formatting if you do not have a label!

Reply

Uruse1980

Member

10 Points

16 Posts

Re: How to add multiple css to textbox

Dec 05, 2020 04:03 PM|Uruse1980|LINK

Thanks Paul, you are right. Despite this I cannot reproduce it in .aspx page. Can you help me? Thanks.

Reply

PaulTheSmith

Participant

1620 Points

927 Posts

Re: How to add multiple css to textbox

Dec 06, 2020 05:16 AM|PaulTheSmith|LINK

Uruse1980
Despite this

You mean 'because of this'

If you don't have a label then you will not have a formatted label.

If you want a formatted label you need to add a label first.

Add your label so that the resulting page has the same html structure as the example you are trying to reproduce.

Reply

Uruse1980

Member

10 Points

16 Posts

Re: How to add multiple css to textbox

Dec 06, 2020 12:33 PM|Uruse1980|LINK

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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></title>
    


    <style>
.row span {
    position: relative;
    display: inline-block;
    margin: 11px 15px;
}
.textbox {
    display: inline-block;
    width: 215px;
    padding: 11px 0 11px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #377D6A;
    background: #efefef;
    border: 0;
    border-radius: 3px;
    outline: 0;
    text-indent: 70px;
    transition: all .3s ease-in-out;
    border: solid 1px #ccc;

}
.textbox::-webkit-input-placeholder {
    color: #efefef;
    text-indent: 0;
    font-weight: 300;
}
.textbox + label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 15px;
    text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
    background: #f3ce41;
    transition: all .3s ease-in-out;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.textbox:focus,
.textboxe:active {
    color: #377D6A;
    text-indent: 0;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

}
.textbox:focus::-webkit-input-placeholder,
.textbox:active::-webkit-input-placeholder {
    color: #aaa;
}
.textbox:focus + label,
.textbox:active + label {
    transform: translateX(-100%);
}
</style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" CssClass="row textbox textboxe" runat="server" Text="Label"></asp:Label><asp:TextBox ID="TextBox1" CssClass="row textbox textboxe" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Why don't work?

Reply

mgebhard

All-Star

53041 Points

23613 Posts

Re: How to add multiple css to textbox

Dec 06, 2020 01:44 PM|mgebhard|LINK

You are not following the example HTML design. The "row" class defines a row block and that's why a div used. A div is a block element and can contain other HTML elements. You are applying the class to a label. A label renders as a span which is an inline element. An inline element is used to bold a section of text. An inline element does not contain other elements.

You need to learn HTML and CSS in order to understand how to design the HTML. Your CSs is looking for a "span" within a "row" class. Your HTML design does not have a span within a row. Since labels render as a span the markup should like this the following.

    <div class="row">
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>

Like the previous suggestions, I also recommendations learning how to use the browser's dev tools. Dev tools shows the CSS applied to each element which is very powerful. But you need to have a solid understanding of HTML and CSS.

Lastly, you might consider moving to MVC. MVC is a lot easier to work with when it comes to CSS. Web Forms is tricky because you have less control over the HTML rendering.

How to add multiple css to textbox[Answered] RSS

8 replies

Shortcuts

How to add multiple css to textbox

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox

Uruse1980

Re: How to add multiple css to textbox

Re: How to add multiple css to textbox