How to remove focus border (outline) around text/input boxes and button

How to Remove and Style the Border Around Text Input Boxes
How to Remove and Style the Border Around Text Input Boxes
How to Remove and Style the Border Around Text Input Boxes

When we create textbox using html then on focus we see that there is a border arround textbox, Today in this article we will learn how to remove
remove outline around text input boxes and select menu and button in chrome using CSS.

How to Remove Outline around Text Input Boxes in Chrome

To remove textbox outline from chrome just add css outline zero.

<style type="text/css">
    .txtbox
  {
	  width:25%;
	  height:40px;
	  border:none;
	  padding-left:10px;
	  font-size:15px;
	  -webkit-box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
-moz-box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
  }
  
  .txtbox:focus
  {
	  outline:0px;
  }
</style>


<input type="text" placeholder="Textbox" class="txtbox" />

How to Remove Outline around Text Input Boxes in Chrome

<style type="text/css">
    .mybt
  {
	  width:120px;
	  height:40px;
	  border:none;
	  margin-top:15px;
	  padding-left:10px;
	  font-size:15px;
	  cursor:pointer;
	  background:#f60;
	  color:#fff;
	  margin-top:20px;
	  -webkit-box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
-moz-box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
box-shadow: 0px 0px 16px 0px rgba(209,209,209,1);
  }
  
   .mybt:focus
  {
	  outline:0px;
  }
</style

 <input type="button" class="mybt" value="SUBMIT" />

Leave a Reply

avatar
  Subscribe  
Notify of