How to add a stylish asp text box

Question

I need to design a stylish textbox in asp.net how to i do

Gajendra Jangid · Answer

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

Jignesh Kumar · Answer

Hi Nandakumar, Please find below link, https://www.cssportal.com/form-elements/text-box.php https://css-tricks.com/styling-texty-inputs-only/

Suraj Kumar · Answer

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: . 3 s ease-out; &:before,&:after{ content : "" ; display : inline- block ; position : absolute ; left: 25px ; transition-property: top , bottom ; transition: . 3 s 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

Sanwar Ranwa · Answer

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+

How to add a stylish asp text box

Answers (4)