Hmmmm make an input behave like a div?

HTML & CSS
1

I have given a from INPUT display:block; but it still does not stretch to fill it’s container automatically. I am hoping to avoid giving it an explicit width ( 100%) as its padding would then make it be larger than its containing element… Maybe this isnt possible or maybe am missing something which is deceptively simple…

any advice would ,as always, be greatly appreciated…

2

The only thing I would think of trying (though I doubt it would work - much less cross browser) is to float the input left and give it margin-right:-100%.

3

Or wrap it in a div with PR. And give the input PA with left/right 0. Same though - doubt that would work.

4

actually, as much as a I loathe using the extra tag I was experimenting with a span… to which I gave display:block… ( no need to use PR or PA). Great minds think alike I suppose. Still it’s kind of a bummer that you can’t actually override the width setting on a form input…

5

Hi,

For IE8 upwards you could use box-sizing and do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style type="text/css">
.wrap {
    width:192px;
    background-color: #f0f;
}
.wrap input {
    padding:2px 5px;
    width:100%;
    border:1px solid red;
    float:left;
    clear:left;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
</style>
</head>
<body>
<form action="">
    <div class="wrap">
        <label for="fname">First Name</label>
        <input type="text" name="name" id="name" value="1"  />
    </div>
</form>
</body>
</html>

If you need ie7 support then you could do the negative margin trick.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style type="text/css">
.wrap {
    width:192px;
    padding:0 4px;
    background-color: #f0f;
    overflow:hidden;
}
.wrap input {
    padding:2px;
    width:100%;
    margin:0 -1px 0 -4px;
    float:left;
    clear:both
}
</style>
</head>
<body>
<form action="">
    <div class="wrap">
        <label for="fname">First Name</label>
        <input type="text" name="name" id="name" value="1"  />
    </div>
</form>
</body>
</html>
6

Paul…
Thats a cool solution, but I was hoping I could go in a different direction. I idea came to me in a post I saw here on SP where someone asked how to make the last in a horizontal menu LI fill the remaining space. That solution, of course, is to make the last LI not float and give it overflow:hidden…for good measure.

it struck me, that floating the label and not the input, then giving the input display:block SHOULD have the same effect on form elements. But it appears that input tags have some sort of default explicit width that I just cant seem to override w/o giving them explicit width… which of course defeats the purpose of my experiment. :confused:

My idea was something like this:


.wrap label {float:left;}
.wrap input {display:block;  overflow:hidden;}
7

[QUOTE=dresden_phoenix;4885298]
it struck me, that floating the label and not the input, then giving the input display:block SHOULD have the same effect on form elements. But it appears that input tags have some sort of default explicit width that I just cant seem to override w/o giving them explicit width… which of course defeats the purpose of my experiment. :confused:

[QUOTE]

Inputs are replaced elements have intrinsic dimensions just like images (which are replaced elements also).

Imagine that you are trying to make an image behave in the same way and you can see why it is not possible :slight_smile: