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 underline groups of letters in HTML and CSS

    How to make a responsive text inside a bootstrap button

    How to add event handlers to DIVS with CSS classes containing a particular string?

    How do I link an external css to overwrite bootstrap css for centering elements?

    How to bottom-align these divs?

    How to include this basic html (CSS, JavaScript) template into a php file?

    How do you disable the set width of parent element for child element?

    How to style webpage with percentages

    How to make an element match the height of a dynamic page

    CSS Styling - DIV - How to prevent the div element to skip to the next line?

    How erase extra black on drop down menu

    How do I make this lightbox I am creating only open on the div I am clicking?

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    How to deselect a table's head and certain tds with css

    How to align a div with the right of a table?

    How to make the text that are typed inside the input to appear into a seperate div

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How can I stop a CSS keyframe animation?

    Javascript - how to show and hide an element per second?

    How to make my asp chart scrollable in the x direction

    How would you explain CSS positioning to a human being?

    select tag in Google Chrome shows lowercase options

    How to pass JavaFX variable into CSS style?

    how to make html email look exactly the same as previewed just in browser?

    How to apply css class to uploaded image? [closed]

    How can I achieve this transparency effect using css?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to implement min left/right in css

    How to use one single png image to create multiple website buttons (and their hovers)

    How can I force an image to display in its entirety with CSS?