Элемент фиксированной ширины с вводом переменной ширины

Question

Вы, вероятно, скажете, что об этом уже спрашивали, но это вариант с ошибкой. Таким образом, мы все знаем о технике, используемой для ответа на этот вопрос: фиксированная ширина div слева, заполнение оставшейся ширины div справа

Однако это не работает, если элемент переменной ширины является входным тегом.

http://jsfiddle.net/8pk4K/2050/

даже переопределение входных данных по умолчанию css не исправляет это:

display: block;
overflow:hidden; 
background-color:green;
height: 100px;
width: auto;

Я играл с этим целую вечность, это происходит только с входными тегами, если вы замените его на span (по умолчанию отображение встроено, но установите для него отображение блока), оно все еще работает.

Любая идея, почему это не работает только для входных тегов и ничего больше?

РЕДАКТИРОВАТЬ: Для ясности, я знаю, что исправить это, чтобы поместить вход в div и применить ширину 100% для ввода. Мой вопрос, почему это необходимо, а не как это исправить.

Answer 1

Вы можете использовать calc для получения желаемой ширины, потому что входные данные - это заменяемые элементы, которые имеют внутренние размеры, как изображения

CSS

.header-right{
    display: block;
    overflow:hidden; 
    background-color:green;
    height: 100px;
    border: none;
    width: calc(100% - 240px); //Add this
    }

Примечание. Вы должны задать размер (ширину) для выбора или иным образом задать ширину браузера по умолчанию.

ДЕМО ЗДЕСЬ

Answer 2

Я знаю проблему, стилизация элементов формы всегда будет болью в заднице.

Я придумал эту работу, обернув ввод в правильный div.

<div class="header"></div>
<div class="header-right">
    <input type="text" />
</div>

.header{
    float:left;
    background: #efefef;
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    overflow:hidden; 
    background-color:#000;
    height: 100px;
    position: relative;
    }
.header-right input {
    background: green;
    position: absolute;
    width: 100%;
    height: 100%;
}

JSFiddle

Answer 3

Попробуйте добавить ширину в% для.header и.header-right. подобно

.header{
width:20%;
}
.header-right{
width:80%;
}