Textbox: Textmode removes rounded corners

Heinz Deubler 1 Reputation point
2020-11-30T18:25:31.367+00:00

I had a textbox with rounded corners however when I apply "textmode="password" the rounded corners disappear.

 .btn[type="submit"] {  
        border-top: 1px solid #CCCCCC;  
        border-left: 1px solid #CCCCCC;  
        border-right: 1px solid #999999;  
        border-bottom: 1px solid #999999;  
        -moz-border-radius: 15px;  
        -webkit-border-radius: 15px;  
        width: 150px;  
        height: 24px;  
        font-size: 16px;  
  
<div class="div" style="padding-top:70px";"><asp:TextBox ID="txtUserName" placeholder="  Email Address" runat="server"  CssClass="txtbox" ></asp:TextBox></div>  
                        <div class="div" ><asp:TextBox ID="txtPassword" placeholder="  Password" TextMode="Password" runat="server" CssClass="txtbox"></asp:TextBox></div>  
  
  
![43841-img.png][1]  
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,359 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Yijing Sun-MSFT 7,071 Reputation points
    2020-12-01T06:47:39.537+00:00

    Hi @Heinz Deubler ,

    You don't post radius css of the password textbox. I have created a test and it works.Just like this:

    <style>  
            #txtUserName {  
                -moz-border-radius: 15px;  
                -webkit-border-radius: 15px;  
            }  
            #txtPassword {  
                -moz-border-radius: 15px;  
                -webkit-border-radius: 15px;  
            }  
        </style>          
      
     <div class="div" style="padding-top:70px";">  
                 <asp:TextBox ID="txtUserName" placeholder=" Email Address" runat="server"  CssClass="txtbox" ></asp:TextBox>  
             </div>  
            <div class="div">  
                <asp:TextBox ID="txtPassword" placeholder="  Password" TextMode="Password" runat="server" CssClass="txtbox"></asp:TextBox>  
            </div>  
    

    Result:

    Z4Ugg.png


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Yijing Sun

    0 comments No comments