SolutionFix
17 лет програмлю ;)
- Регистрация
- 20 Ноя 2006
- Сообщения
- 272
- Реакции
- 351
- Автор темы
- #1
В общем такая задача, помогите вдруг кто знает.
Нужно совместить input+select, чтобы когда пользователь выбирал option в select-e, оно подставлялось в input, а визуально это выглядело как один элемент.
Необходимо реализовать без использования JS для изменения ширины/видимости элементов, только для заполнения input из select.
Стандартные решения - например вот такое, я давно знаю:
Но счас возникла задача - как сделать "плавающую" ширину. То есть в приведенном выше коде нужно чтобы у элементов было width: 100%.
Очень неохота дописывать костыли на js/jquery по изменению ширины, так как при изменении ширины окна браузера, динамическом изменении ширины других элементов это все надо пересчитывать, и абсолютно все варианты учесть довольно сложно, да и костыль есть костыль.
Помогите, если кто знает css получше меня, и знает как ему блин сказать "налложить два элемента друг на друга, растянув первый на 100% по ширине, а второй на 100% - N pixel".
Спасибо.
Нужно совместить input+select, чтобы когда пользователь выбирал option в select-e, оно подставлялось в input, а визуально это выглядело как один элемент.
Необходимо реализовать без использования JS для изменения ширины/видимости элементов, только для заполнения input из select.
Стандартные решения - например вот такое, я давно знаю:
HTML:
<style type="text/css">
.select-and-input {
position: relative;
height: 25px;
width: 100px;
}
.select-and-input select {
position: absolute;
z-index: 0;
top: 0;
left: 0;
height: 23px;
width: 100px;
}
.select-and-input input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: 18px;
padding:0;
width: 78px;
}
</style>
<div class="select-and-input">
<select name="selectName" onchange="parentNode.getElementsByTagName('input')[0].value=value">
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<input type="text" name="inputText"/>
</div>
Но счас возникла задача - как сделать "плавающую" ширину. То есть в приведенном выше коде нужно чтобы у элементов было width: 100%.
Очень неохота дописывать костыли на js/jquery по изменению ширины, так как при изменении ширины окна браузера, динамическом изменении ширины других элементов это все надо пересчитывать, и абсолютно все варианты учесть довольно сложно, да и костыль есть костыль.
Помогите, если кто знает css получше меня, и знает как ему блин сказать "налложить два элемента друг на друга, растянув первый на 100% по ширине, а второй на 100% - N pixel".
Спасибо.