How to add a stylish asp text box

You can create style in CSS as per your requirement becuase you know better than other which type of style (height, width, font, color, background, event, etc.) want. You can also use the bootstrap and change the css as per your need.

If you want to see some demo then you can get it from the below link.

https://codepen.io/tag/textbox/

Here is one example - HTML

<div class="box-container">
<div class="box">
<input type="text" placeholder="Focus on me">
<span>span>
div>
div

CSS

html,
body {
margin: 0;
padding: 0;
background: #fff;
}
* {
box-sizing: border-box;
}
$focusColor:#0099ef;
.box-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
.box {
margin-bottom: 30px;
display: inline-block;
position: relative;
input {
padding: 5px 10px;
height: 45px;
font-size: 1em;
line-height: 45px;
border: 2px solid #ccc;
width: 400px;
outline: none;
background: #fff;
color: #a2a5a7;
&:focus {
+ span {
width: 100%;
opacity: 1;
transform:translateX(0);
&:before {
top: 0;
left: 0;
width: 100%;
}
&:after {
bottom: 0;
left: 0;
width: 100%;
}
}
}
+ span {
display: inline-block;
position: absolute;
left: 0;
top: 0;
border-left: 2px solid $focusColor;
border-right: 2px solid $focusColor;
width: calc(100% + 100px);
transform:translateX(-50px);
height: 100%;
pointer-events: none;
opacity: 0;
transition-property:opacity, width;
transition: .3s ease-out;
&:before,&:after{
content: "";
display: inline-block;
position: absolute;
left: 25px;
transition-property:top, bottom;
transition: .3s ease-out;
height: 2px;
width: calc(100% - 50px);
background: $focusColor;
}
&:before {
top: -30px;
}
&:after {
bottom: -30px;
}
}
}
}
}

This is a border animated textbox and you can see the actual code with demo at

https://codepen.io/azouaoui-med/pen/zapOjK?page=2

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Gajendra Jangid7y ago
hello dear,

please have a look at below link:

https://stackoverflow.com/questions/5610409/css-of-a-asp-textbox-control
https://www.skotechlearn.com/2018/06/stylish-glowing-textbox-design-in-ASP-NET.html
0
Jignesh Kumar7y ago
Hi Nandakumar,

Please find below link,

https://www.cssportal.com/form-elements/text-box.php
https://css-tricks.com/styling-texty-inputs-only/
0
Suraj Kumar7y ago
You can create style in CSS as per your requirement becuase you know better than other which type of style (height, width, font, color, background, event, etc.) want. You can also use the bootstrap and change the css as per your need.

If you want to see some demo then you can get it from the below link.

https://codepen.io/tag/textbox/

Here is one example - HTML
<div class="box-container">
  <div class="box">
    <input type="text" placeholder="Focus on me">
    <span>span>
  div>
div
CSS
html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}
* {
  box-sizing: border-box;
}

$focusColor:#0099ef;
.box-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

  .box {
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
    input {
      padding: 5px 10px;
      height: 45px;
      font-size: 1em;
      line-height: 45px;
      border: 2px solid #ccc;
      width: 400px;
      outline: none;
      background: #fff;
      color: #a2a5a7;
      &:focus {
        + span {
          width: 100%;
          opacity: 1;
          transform:translateX(0);
          &:before {
            top: 0;
            left: 0;
            width: 100%;
          }
          &:after {
            bottom: 0;
            left: 0;
            width: 100%;
          }
        }
      }
      + span {
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
          border-left: 2px solid $focusColor;
          border-right: 2px solid $focusColor;
          width: calc(100% + 100px);
          transform:translateX(-50px);
          height: 100%;
          pointer-events: none;
          opacity: 0;
          transition-property:opacity, width;
          transition: .3s ease-out;

          &:before,&:after{
            content: "";
            display: inline-block;
            position: absolute;
            left: 25px;
             transition-property:top, bottom;
            transition: .3s ease-out;
            height: 2px;
            width: calc(100% - 50px);
            background: $focusColor;
          }
          &:before {
            top: -30px;
          }
          &:after {
            bottom: -30px;
          }
        }
    }
  }
}
This is a border animated textbox and you can see the actual code with demo at
https://codepen.io/azouaoui-med/pen/zapOjK?page=2
0
Sanwar Ranwa7y ago
Helllo

Please check these Links

https://stackoverflow.com/questions/1648789/how-to-style-textbox-using-css-in-asp-net

http://hamidseta.blogspot.com/2012/01/css-class-for-textbox-in-aspnet.html

https://forums.asp.net/t/1439419.aspx?Adding+style+sheet+to+control+textbox+
0