Geek asks and answers

Strange behavior with absolute INPUT positioning with left and right CSS properties

I am learning CSS formatting absolutely positioned <input>. I would like it to “stretch” inside its container (which is also positioned “absolute”), so that it leaves, for example, 30 pixels both left and right, and fills all the space inside ...

I already found a sample on w3.org that uses both left and right to create some kind of “frame set” in CSS.

I also read an article from A-List-Apart about this technique, and I found here a few other questions regarding similar problems, but none of them relate to the specific problem that I will cover. I also found that I can wrap the inside <input>with help <div>, but I would like to work on this issue a bit to understand why this is wrong ...

Here is a working sample that I made to test and clarify the idea. In short, it's that simple:

<div id="sidebar">
  <input type="text" value="input" />
</div>

with the following style:

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar input {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
    width: auto;
}

An interesting point is the last three lines, when I set left and right and leave the width as “auto”.

, , Chrome (v.26), FF.20 IE.10 : <input> div.. , : 100% ...

, DIV SPAN .

? , <input> : 100% <div>, ?

, - .

PS: "", html5-, , IE8 .

+5
3

. ( ), IE 10 FF input type="text"

: input type="range", input type="number" IE 10. , , , , , OS.

FF (PC/Mac) , size , , -, . , size=4 , . , -, size=20.

, , , IE9/10, FF (/Mac), Chrome (/Mac) Safari (Mac).

: http://jsfiddle.net/ws9hf/13/

#sidebar .x {
    position: absolute;
    box-sizing: border-box;
    width: -webkit-calc(100% - 60px);
    width: calc(100% - 60px);
    left: 30px;
    right: 30px; /* fallback */
}

cacl(), . , " " W3, .

"", calc() - , , (-) . .

+5

div div.

<div id="sidebar">
     <div id="inputContainer">
         <input type="text" value="input" />
     </div>
</div>

body { height: 100% } /* Required for percentage heights below */
#sidebar {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    width: 160px;
}
#sidebar #inputContainer {
    position: absolute;
    margin: 0;
    padding: 0;
    height: 21px;
    left: 30px;
    right: 30px;
}
#inputContainer{
    width: 100%;
}
+1

, , , flexbox.

, flexbox , 30 , :

#sidebar {
    /* stripped out additional styles and prefixes */
    display: flex;
    flex-direction: column;
}

#sidebar x {
    margin: 0 30px;
}

. http://jsfiddle.net/ws9hf/8/

0

More articles:


All Articles