How to set full auto width for input tag


Tags: html,css

Problem :

I have 3 elements inline, first is span with image and defined with using padding left and right, I don't want to resize her width, just only like now width padding left and right.

My problem is on different resolution to fit this 3 inline element to be fit to container full 100% width.

How to set resizable width for INPUT on different resolution.

On small resolution I may to write new smaller width for INPUT tag.

Is it possible to set resizable input tag.

I want three elements to be 100% width in container of 90%, without resizing span elements, only INPUT.

I tried for this set width:78% of input tag, but thats it for large resolution, how to set for all resolution?

Is it posible to do using only HTML and CSS??

https://jsfiddle.net/4654eaue/4/

HTML

<div class="container">
    <span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span><input type="text" name="fname" value="John Doe" disabled class="profileusername bordertop"><span><img src="http://science.psu.edu/alert/icons/video-iconSmall.png"></span>
    </div>

CSS

.container{
    width:90%;
}
input{
    width:78%;
    vertical-align:top;
    display:inline-block;
    height:23px;
}
span img{
    vertical-align:middle;
    padding-right:10px;
    padding-left:10px;
}
span{
    vertical-align:top;
    display:inline-block;
    background-color:grey;
}


Solution :

Is this what you are going for? https://jsfiddle.net/4654eaue/10/

I added a background color to the container so that you can see it takes up all of it https://jsfiddle.net/4654eaue/11/

I used the css calc()

like this:

input{
    width: calc(100% - 125px);
    vertical-align:top;
    display:inline-block;
    height:23px;
}

So the input is now 100% of the 90% (minus the width of the span)


    CSS Howto..

    How to take an element over to given padding with CSS

    How to prevent division when using variables separated by a slash in CSS property values

    How to set css @media print styling with jquery

    how to set zoom level using css

    How to read DOM in React

    How to position an icon in a metro-like web GUI? (images included)

    CSS how to change the color of a link within a class

    How do CSS sprites speed up a web site?

    How to Implement different backgrounds on scroll [closed]

    Integration of CSS, Javascript and html ,,,howto

    How to Make Inline SVG Scale to Parent Element with CSS

    How to create hidden pop out side menu

    How to prevent embedded video from linking to another web page

    Trade off for CSS sprites: how many images to combine into one

    Attempting to show logo using 'content' from CSS

    How to fix my nav bar? Positioning is different on different screens

    How do I specify another width for newly added divs in javascript

    How can i center the list items inside my unordered list?

    How to display an image using an img tag and css and class instead of src attribute

    How to hide text behind image

    How to set each type of page transition to a specific page? (css animations)

    CSS or Javascript href hover (or mouseover) showing additional clickable links

    How to stop text from overlapping CSS?

    How to Rotate Text and have it's Parent Div act Dynamically

    How do I customise the style of the Auth0 lock control?

    How to create fixed to screen layout

    How to automatically style HTML output of kramdown converter?

    How to use EMs in CSS Media Queries aligned with JavaScript events?

    CSS transform Scale translates the object, how to avoid this?

    How to assign CSS background image properties mixing classes and ids