CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5489250
user5489250

Reputation:

how to make length of input box same in firefox and chrome?

I want a input field in my website design. When I coded like this as shown in below

HTML:

 <input type="text" name="lemail" value= "" placeholder="Email" id = "lemail"/>

CSS:

  *{
     font-size:12px;
     font-family: sans-serif,helvetica,arial;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -ms-box-sizing: border-box;

  }  

  #lemail{

      position: absolute;
      top: 40px;
      left: 20px;

      padding-left: 20px;
      padding-top: 8px;
      padding-right: 20px;
      padding-bottom: 8px;
      border: 1px solid #007599;
      border-radius: 3px;

   }

captured photo results:

CHROME: chrome output here FIREFOX: firefox output here

here the problem is input box length is different in chrome and firefox. In firefox length is a larger than in chrome.Border-box did not work. how to make input field look same in both browser?

Upvotes: 1

Views: 83

Answers (1)

Ali Awais
Ali Awais

Reputation: 51

define width to your box like as in below code width:250px;

#lemail{
  position: absolute;
  top: 40px;
  left: 20px;
  padding-left: 10px;
  padding-top: 8px;
  padding-right: 20px;
  padding-bottom: 8px;
  border: 1px solid #007599;
  border-radius: 3px;
  width:250px;
}

Upvotes: 1

Related Questions