How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields.

Initially, I attempted to adjust the border size to match the text field, which seemed to work. However, upon testing it on a larger screen using Internet Explorer (IE), the same problem reappeared.

Below is a snippet of 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 am looking for a solution where the border automatically scales to match the size of the text box across all browsers and screens.

htmlcss

Answer №1

To start, as mentioned by @Nimsrules, place the border around the input field. Next, utilize a viewport to ensure scalability. The viewport should be included in the head section of your code. Instead of using percentages, consider utilizing vw for width and vh for height.

For 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>

Check out this Fiddle

For more information on viewports, you can visit this link.

It's advisable to avoid inline CSS and opt for a separate CSS file instead. This resource provides insights on why inline CSS is not recommended: this article.

Answer №2

To fix the issue, adjust the styling on the input element.

The reason it's not working is because you also have set width:37.5%; on the parent element.

<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>

Answer №3

Applying a border to the input field can be tested on Internet Explorer.

If it doesn't seem to be working, consider removing the current border CSS properties, such as

border-color: grey;

and

border-style: solid;

Instead of using a single tag for styling, giving this method a try might yield better results.

Fingers crossed for success!

Answer №4

Greetings! It's not recommended to use inline styles as they can make editing a hassle. It's better to create a class and define the styles in your CSS file instead :)

Take a look at your HTML structure below:

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

Here are the corresponding CSS styles:

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

And lastly, see the difference with an INLINE style included:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm still unclear on the necessity of using clear:both

Presenting a simplified example of my previous query, I am still seeking clarification regarding the necessity of using clear:both to enable padding-top. Can someone provide a straightforward illustration to elucidate the usage of float and clear? Hence, ...

htmlcss

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: I've created simila ...

javascripthtmlcssreactjsmaterial-ui

Issues encountered with AngularJs filter search functionality

Why am I having trouble adapting this search filter from here? This is what my code looks like: controllers.js angular.module('starter.controllers', ['starter.services']) .controller('AppCtrl', function($scope, $ionicModal ...

javascripthtmlangularjs

Hovering over an option in Vue-Bootstrap b-select

I'm working with the Vue-Bootstrap framework and I need to update the CSS rule for the 'option' tag when it is being hovered over. Here is my code snippet: jsfiddle option:hover { background-color: red; } Can someone please explain why ...

cssvue.jshoverbootstrap-vueselect-options

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

Ways to Adjust Website Scaling for Varying Screen Sizes

Is there a way to adjust my website's scale based on the device width, such as changing it to 0.7 for certain devices? The only information I've found so far is using the <meta> tag: <meta name="viewport" content="width=device-width, i ...

htmlcssmedia-queriesviewport

Bootstrap 4's container overflowing feature

I am trying to create a container with both horizontal and vertical overflow using the "auto" value. I want the content inside this container, which will mainly consist of large tables, to be scrollable within a window. It would be ideal if this container ...

cssbootstrap-4overflow

Guide on hiding a div element when clicked outside of it?

How can I create a dropdown feature in Khan Academy where it disappears when clicked outside but stays visible when clicked inside, using JavaScript/CSS/HTML? The current implementation closes the dropdown even on internal clicks. The code includes an even ...

javascripthtmlcsskhan-academy

Identify the font style of the text box and ensure that the contenteditable feature matches the appearance of the

I'm struggling to style a contenteditable element to resemble a regular textbox on my website. Can anyone help me identify the font used in this picture? I've tried several but none seem to match perfectly. https://i.sstatic.net/2aAbb.jpg The co ...

htmlcssstylesheetcontenteditable

Rows in the table are distinguished by varying colors

Is it achievable to replicate this design solely using table CSS style? I am able to assign different colors to even and odd rows, but my goal is to achieve something like this (just the colors): ...

csscss-tables

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

As a newcomer to Vuetify, I am still learning the ropes. One thing I've noticed is that <v-main> automatically expands to fill the space between <v-app-bar> and <v-footer>, taking up the entire viewport height. My concern arises wh ...

htmlcssvue.jsuser-interfacevuetify.js

You may only insert a single image into a container

My goal is to display two images side by side with text centered between them. However, when I add the first image using CSS and the background property, I run into issues adding a second image as it overrides the first one. Placing the images directly in ...

htmlcssimagecss-position

Navigating through each segment

I'm currently working on a website with sections that are set to be 100% height of the window, but at least 800px tall. My goal is to implement a smooth scrolling functionality where one scroll moves the view from section to section. However, if the ...

javascriptjqueryhtmlcss

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

javascripthtmltypescript

The HTML object is experiencing difficulties with the Ajax page loader feature not functioning as

I attempted to use the code below in order to show an Ajax loader image while the page loads into an HTML object. Unfortunately, it didn't work as expected and I'm having trouble figuring out why. Everything seems to be functioning correctly exce ...

jqueryhtmlajax

Problems with script-driven dynamic player loading

I am attempting to load a dynamic player based on the browser being used, such as an ActiveX plugin for Internet Explorer using the object tag and VLC plugin for Firefox and Google Chrome using the embed tag. In order to achieve this, I have included a scr ...

javascriptjqueryhtml

Steps to activate highlighting for the initial value in a quarterly datepicker

Concerning the quarterPicker feature in the Bootstrap datePicker (SO: how-to-change-bootstrap-datepicker-month-view-to-display-quarters, jsfiddle: jsFiddle): Is there a way to highlight an initial value upon startup? I have tried setting a value in win ...

javascriptjquerycsstwitter-bootstrapdatepicker

Voice recognition feature in the latest version of Chrome on Android devices

When using a PC with Chrome 25 (non beta), I see a microphone icon that prompts for input when clicked. After speaking, my alert call is successfully executed. However, on a Galaxy Note smartphone with Chrome 25 and an Android 4.04 operating system, the sa ...

androidhtmlgoogle-chromespeech

Filling an HTML template with an $http response in VueJS

After learning about VueJs, I decided to embark on a small project - a nutrition app where food recommendations are made based on specific nutrients. Below is the JavaScript code snippet: recommendFood: function() { this.recs = {}; ...

javascripthtmlhttppromisevue.js