Stylish Glowing Textbox Design in HTML with CSS in ASP.Net

SKOTechLearn describe some Textbox style through CSS. Suppose we have TextBox control and want to glow this control during focus cursor on it. So, we use CSS. Through this style process you can style any control and provide professional look. So, SKOTechLearn describe the way to design Stylish Glowing TextBox in HTML with CSS in ASP.Net.

Whenever we develop a web application and work on Textbox for input text, then we think about control's looks with border style, color, font etc. And remember one more thing, styling or developing web-page can not be complete without using HTML and CSS.

But Fist we have to Learn, how to Design TextBox in HTML with CSS in ASP.Net. In HTML we us <input> Tag for TextBox. So, how you can use <Input> Tag in HTML code described bellow:

<input type = "text"   id = "TextBox1"  value = "type text here" />

Like this, we can create More than one TextBox in HTML.

Knowledge to Learn website development in asp.net

HTML Input box with Style Example

Here, we will modify TextBox with 4 different ways.And there is also an output when modification process will complete.

TextBox Output

Add CSS Code StyleSheet in ASP.Net

Suppose we drag 4 TextBox on webform. And add CSS file in your web project in ASP.Net like bellow.

Add StyleSheet in Webform

➢ First, Right click on Project from "Solution Explorer" window, it will present a drop down menu.

➢ Select “Add” option from it. Then select and click on “New Items..” option. This will show a Box for select any items for website development.

➢ Here, we select “StyleSheet” and input Name as “TextboxStyle.css”, then press “Add” button.

Now, your created CSS file has been added to your project. Double click or press “Enter” Key to Open this code window, and write style code here.

Header footer Layout in Webpage through ASP.Net

How to Add CSS File in ASP.Net?

But, if you want to perform your style code on that particular controls, you have to drag this CSS file in Webform's "Source" window.

You have to open you form in Source mode and drag this file just bellow on<Head> tag as mention in following image.

CSS file Use in Form

You can copy this code:

<link href="TextboxStyle.css" rel="stylesheet"  type="text/css" />

You can simply change CSS file name whatever you have to Created in ASP.Net. and replace with "TextboxStyle.css".You can also use this code in HTML for calling CSS for designing Glowing TextBox.

HTML Textbox Style (1) :

Here, we will start from First TextBox1, suppose we assign its CSSClass as txtstyle and write code for it. Then write script for it as mention bellow.

  .txtstyle {         
    border-top-left-radius: 5px;         
    border-top-right-radius: 5px;         
    border-bottom-left-radius: 5px;         
    border-bottom-right-radius: 5px;         
    background: #FFFFFF no-repeat 2px 2px;         
    padding:1px 1px 1px 5px;         
    border:2px solid #9900FF;         
  }         
  .txtstyle:focus {         
    width: 100px;         
    transition: all 0.30s ease-in-out;         
    border: 4px solid #9999FF;         
  }

When you write this script, it will show totally change style, when you focus on this control like bellow.

HTML TextBox Style (2) :

Now we modify second control for modifying through CSS. For TextBox2, assign its CssClass Name as Txtstyle2 and write code for it.

  .Txtstyle2[type=text], textarea {         
      transition: all 0.30s ease-in-out;         
      outline: none;         
      border: 1px solid #666666;         
  }
  .Txtstyle2[type=text]:focus, textarea:focus {         
      box-shadow: 0 0 12px #FF99CC;         
      border: 1px solid #FF6699;         
  }

When you write this script, it will show stylish look, when you focus on this control like bellow.

Add menu and design it in asp.net

HTML TextBox Style (3) :

After that, there is another CSS script to create control in its attractive look. Now, TextBox3 assign its CssClass Name as Txtstyle3 and write code for it.

  .Txtstyle3[type=text], textarea {         
      transition: all 0.30s ease-in-out;         
      outline: none;         
      border: 1px solid #666666;         
  }         
  .Txtstyle3[type=text]:focus, textarea:focus {         
      box-shadow: 0px 0px 5px #66FF99;         
      padding: 2px 0px 2px 2px;         
      margin: 2px 1px 3px 1px;         
      border: 1px solid #009900;         
  }

This script will show another attractive look during focus on this control as mention bellow output.

HTML TextBox Style (4) :

Now, come to last Text, suppose we drag TxtBox4 and assign its CssClass as Txtstyle4 and write script for it.

   .Txtstyle4 {         
        border: 1px solid #c4c4c4;         
        padding: 2px 2px 2px 2px;         
        border-radius: 4px;         
        box-shadow: 0px 0px 8px #d9d9d9;         
        background-color: #F0F0FF;         
   }         
   .Txtstyle4:focus {         
        outline: none;         
        border: 1px solid #7bc1f7;         
        box-shadow: 0px 0px 8px #7bc1f7;         
        background-color: #FFF2FF;         
   }