how to make the borders of a text field scales to fit the size of the text field in CSS

Question

I'm working on a CSS/HTML project and I have a problem with the borders of the text fields. In the browser, the borders are shorter than the text fields.

I tried changing the size of the border to fit the text field and it worked but I tried opening the browser (IE) on a bigger screen and I faced the same problem again.

Here is my code:

<tr>
  <td>First Name</td>
  <td>
    <div style="border:4px #26a570 solid;
               background-color:white; 
      width:37.5%; 
      height:15%">
      <input type="text" name="txtFirst" id="txtFirst" />
    </div>
  </td>
</tr>

I want the border to scale to the size of the text box in all the browser and screens.

Hey man I added an answer for you. It has the correct way of styling and examples for you to do what you want. Check it out. ;) — 13garth, Jun 12 '19 at 09:57

xmaster · Answer 1 · 2019-06-12T09:58:23.747

First like @Nimsrules mentioned put your border around the input. Second use a viewport. this will make it scaleable. Your viewport has to be in the head. And instead of using % you can use vw for the width en vh for the height.

Example

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<tr>
    <td>First Name
</td>
    <td>
<div > 
    <input type="text" name="txtFirst" id="txtFirst" style="border:4px #26a570
 solid;background-color:white; width:37.5vw; height:15vh"/>
</div>
</td>
  </tr>

Fiddle

Here you can read more about viewports.

Also I wouldn't recommend inline css. It is better to use a css file. Read this for more information why it is not recommended.

score 0 · Answer 2 · answered Jun 12 '19 at 09:47

0

You need to set the style on the input element,

It does not work because you had width:37.5%;set to the parent also.

  <table>
  
  <tr>
    <td>First Name
</td>
    <td>
<div> 
    <input style="width: 200px; border:4px #26a570
 solid;background-color:white; height:15%" type="text" name="txtFirst" id="txtFirst" />
</div>
</td>
  </tr>
  </table>

answered Jun 12 '19 at 09:47

DigitalJedi

1,577
1
10
29

it is weird I tried applying your solution and the border disappeared, I don't know why – W.M Jun 12 '19 at 10:02
As per my understanding , i suggest using position relative in div instead of width – deepica Jun 12 '19 at 10:07
@W.M well you can clearly see the border in my solution, so you must have some other css overwriting it – DigitalJedi Jun 12 '19 at 10:34

score 0 · Answer 3 · answered Jun 12 '19 at 09:47

0

You can set border to the input field and check it on IE.

If it does not work then try to break out the border CSS you have applied, as

border-color: grey;

and

border-style:solid;

instead of single tagging, you can try this.

Hope it works!

answered Jun 12 '19 at 09:47

Shweta

661
6
11

score 0 · Answer 4 · answered Jun 12 '19 at 09:55

0

Hi Firstly it is bad to write inline styles because editing can be a pain. You should set a class and write the styles in your CSS file :)

Here's your HTML

<table>
  <tr>
    <td>First Name</td>
    <td>
      <div> 
          <input class="input-wrapper" type="text" name="FirstName" />
      </div>
    </td>
  </tr>
</table>

Here's your CSS

input.input-wrapper{
  border:5px solid green;
}

And here's your INLINE style

<input style="border:5px solid green;" type="text" name="FirstName" />

answered Jun 12 '19 at 09:55

13garth

655
1
8
22

is it possible to make it work using the inline CSS? because the project I'm working on has the HTML and CSS files separately, it is kind of hard to edit both I' haven't tried it before. and I don't want to miss things up. – W.M Jun 12 '19 at 10:27

how to make the borders of a text field scales to fit the size of the text field in CSS

4 Answers4