CSS: Revert INPUT Element Back to Default Width

Although it may seem impossible, I am still going to ask the question. Suppose I have the following HTML:

<div style="width: 500px;">
    <input class="full" />
</div>

And the corresponding CSS:

input {
    width: 100%;
}

.full {
    display: inline;
    float: left;
    margin: 0 2%;
    width: 96%
}

In this scenario, my input element will have a width of 480px, which generally meets my requirements. However, there are specific cases where it doesn't work as intended. For example:

<div style="width: 500px;">
    <input name="day" size="2" />
    <input name="month" size="2" />
    <input name="year" size="4" />
</div>

This causes the browser to render each input with a width of 500px (jsFiddle)...

Is there a way to revert the browser to the default style in such instances?

Answer №1

To ensure the inputs adjust their width accordingly, simply apply width:auto. This method works regardless of whether you have set the size attribute (it will respect the size if specified).

If you'd like to see a demonstration, visit: http://jsfiddle.net/Madmartigan/kQDpY/3/

On another note, using float will automatically change the display type to block, rendering your inline div declaration redundant. As a result, you can remove it altogether.

Answer №2

To make sure it takes precedence, use the !important declaration:

button {
    background-color: red !important;
}

Check out this example: http://jsfiddle.net/eR6tF/2/

Answer №3

Exploring the "width: auto;" CSS Property

If you're looking for a demonstration, you can check out this example.

In this code snippet, I've applied width:auto; to input elements that have a size attribute. While this may not be the ideal attribute, it illustrates how inputs can be styled differently.

Your question doesn't specify how you want these three inputs to behave. Do you want them to take up the entire width in a 2:2:4 ratio, or simply adjust based on content like we've all assumed?

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

Ensuring a form is required using ng-validate

A sample form structure is shown below: <div class="row" id="yesAuth"> <div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}"> < ...

Highlighting of Vue directives in HTML within WebStorm

Can the Vue attributes and directives be highlighted? Including those in quotes. https://i.sstatic.net/NOGn7.jpg ...

Attempting to insert items into a storage array and subsequently outputting them using a loop

I am attempting to add "contacts" to local storage, and every time I add a new contact I want to refresh it in a jQuery list. I have successfully achieved this without using local storage. However, now I am facing a problem that I can't seem to solve. ...

Resizing a scrollable list using React Refs and UseLayoutEffect

Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...

What is the best way to retrieve ul li values using AngularJS?

I am looking to extract the content of li elements within a ul element in an AngularJS controller and save them into an array. Sample HTML Code: <ul id="list" my-directive> <li>A</li> <li>B</li> <li>C ...

How can I position a CSS Grid grandchild outside the boundaries of its parent using Tailwind CSS?

I'm looking to create a CSS Grid layout where the grandchild element stretches to fit the width of its parent. Here's a demo showcasing my issue -> https://play.tailwindcss.com/jZdsHpPAad The CSS Grid Wrapper I have is as follows: <div cl ...

Tips on assigning a reference to an element that has not been rendered yet

I've created a login page with a button labeled "Watch the video". When the button is clicked, it hides and reveals a video player. My goal now is to automatically start playing the video once it's displayed without requiring an extra play button ...

Add hyphens to separate the words in AngularJS if there is a break in the string

Within a div of set width, a string is being bound to it. This string could be short or long. I would like for the string to break with a hyphen inserted on each line except for the last one. For example: If the string is "misconception" and it breaks at ...

Locate a DOM element by its attribute identifier

Is there a way to use jQuery to find a DOM element based on the name of its attribute, rather than the attribute value? For instance: <div id="div1"> <div id="div2" myattr="myvalue"> </div> </div> I want to locate all element ...

Difficulty encountered in aligning items within neighboring table cells vertically

Currently, I am facing a styling issue with a few table rows. In this particular screenshot: https://i.sstatic.net/FcmJW.png The cells in the blue and red circles are part of a table row (with a height of 50px). Both are set to "vertical-align:top". The ...

Verify if a set of Radio buttons contains at least one option selected

Need help with validating a Feedback Form using either JQuery or Javascript. The requirement is to ensure that every group of radio-buttons has one option selected before the form can be submitted. Below is the code snippet from form.html: <form id=&ap ...

The background image vanishes in Chrome when scrolling downwards

After setting an image with a resolution of 1980 x 1200 as the background for my web page, I encountered an issue. When scrolling down, around the height of 1200px, the image disappears and is replaced by a white background. This problem only occurs in Chr ...

AngularJS 1 - CSS glitch occurs when navigating between tabs

Upon loading my homepage, it appears as follows: Initially, certain rows were filled with a blue background color using ng-class, specifically "row-answered-call" as shown below: <tr ng-repeat="item in list" ng-class="{'row-answered-call': i ...

What is the best way to maintain a socket.io ID while navigating through dynamic HTML files?

Utilizing express and node for server hosting, socket io is employed to track users by saving their unique socket.id. There are two pages in the webapp - a login page and a content page. app.get("/", function(req, res) { res.sendFile(__dirname + "/log ...

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

Tips for defining conditions within the style attribute in JSP

Below is the code that I attempted: <div style="width:85%;"> <input class="formbutt" value="AddNew" title="AddNew" type="button" style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display: ...

Is it possible to customize the formatting of the information displayed within a details tag when it is nested under a summary

Is there a way to format the details information so that it aligns underneath the summary tag? Currently, both lines of text are aligned to the left. <details> <summary> Summary 1 </summary> Details 1 </details> ...

When an element within a dropdown is hovered over, a dropdown menu is triggered

As a newcomer to Web Development, I am facing a fundamental issue with my bootstrap navigation bar. The navigation bar contains multiple dropdown buttons that activate on hover. One of the buttons within a dropdown needs another dropdown to appear when hov ...

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

Translucent" outline for an "opaque" object

Consider the following HTML snippet: <div id="my_div"> </div> Now, let's take a look at the CSS code: #my_div { width: 100px; height: 100px; background-color: #0f0; op ...