Great Rash Posted June 9, 2010 Report Share Posted June 9, 2010 И снова здравствуйте, друзья и коллеги по несчастью!Вот выдалась свободная минутка и я спешу поделиться с вами совсем недавно (30 минут назад) найденным решением для стилизации селекта. Не секрет, что для многих это очень большая проблема, особенно когда попадается тупой заказчик и такой же дизайнер Итак без лишних слов качаем картинку select_bg.gif и разбираемся в коде:<!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> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> .stylized_select { position: relative; overflow: hidden; width: 77px; height: 20px; background: url('select_bg.gif') 0 0 no-repeat; } .stylized_select select { position: relative; z-index: 2; width: 100%; -moz-opacity: 0; opacity: 0; filter: alpha(opacity=0); } .stylized_select .input_wrapper { position: absolute; z-index: 1; left: 0; top: 0; width: 53px; padding: 0 17px 0 7px; } .stylized_select .input_wrapper input { width: 100%; height: 20px; line-height: 20px; border: 0; background: none; } </style></head><body> <div class="stylized_select"> <select name="domen" onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;"> <option value="1">opt 1</option> <option value="2">opt 2</option> <option value="3">opt 3</option> <option value="4">opt 4</option> </select> <div class="input_wrapper"> <input type="text" name="noname" value="opt 1" /> </div> </div></body></html>Проверял в:Mozilla Firefox 3.6Apple Safari 5.0Opera 10Internet Explorer 7InternetExplorer 8В ИЕ 6 метод не работает, но пользователь в нем увидит совершенно обыкновенный селект без каких-либо изменений. Так что метод можно считать кроссбраузерным.Надеюсь, что с применением этого метода у вас станет одной головной болью меньше. Link to comment Share on other sites More sharing options...
psywalker Posted June 9, 2010 Report Share Posted June 9, 2010 Дружище, а объясни плиз вот эту строку поподробнее this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;"> Link to comment Share on other sites More sharing options...
s0rr0w Posted June 9, 2010 Report Share Posted June 9, 2010 Дружище, а объясни плиз вот эту строку поподробнее this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].innerHTML;">От селекта подымаемся по дереву вверх на одну ноду, потом в этом контейнере ищем элементы с именем "input", берем нулевой элемент по списку, его полю "value" присваиваем текст того опшина селекта, который на данный момент выбран.Уточнение. Брать innerHTML у опшина жестоко. Для этого есть свойство text. Link to comment Share on other sites More sharing options...
psywalker Posted June 9, 2010 Report Share Posted June 9, 2010 От селекта подымаемся по дереву вверх на одну ноду, потом в этом контейнере ищем элементы с именем "input", берем нулевой элемент по списку, его полю "value" присваиваем текст того опшина селекта, который на данный момент выбран.Уточнение. Брать innerHTML у опшина жестоко. Для этого есть свойство text.Спасибо.1) Уточнение. Брать innerHTML у опшина жестоко.Почему жестоко?2) Для этого есть свойство textА что это за свойство такое? Link to comment Share on other sites More sharing options...
s0rr0w Posted June 9, 2010 Report Share Posted June 9, 2010 Почему жестоко?Потому что это не очень хороший метод. А что это за свойство такое?Содержит текст, который написан в теге: <option>вот этот текст</option> Link to comment Share on other sites More sharing options...
psywalker Posted June 9, 2010 Report Share Posted June 9, 2010 Потому что это не очень хороший метод. Содержит текст, который написан в теге: <option>вот этот текст</option>Понял, а как именно выглядит этот метод? Название и т. д. Просто хотелось бы про него почитать. Link to comment Share on other sites More sharing options...
s0rr0w Posted June 9, 2010 Report Share Posted June 9, 2010 Понял, а как именно выглядит этот метод? Название и т. д. Просто хотелось бы про него почитать.Про метод я имел в виду данный подход, когда берется именно innerHTML.Советую попробовать сделать вот так <option value="1"><!-- Comments here -->opt 1</option>И выбрать его. А потом заменить innerHTML на text. Link to comment Share on other sites More sharing options...
Great Rash Posted June 9, 2010 Author Report Share Posted June 9, 2010 Ладно признаю, что с innerHTML прокололся. Но дело совсем не в этом 1 Link to comment Share on other sites More sharing options...
Great Rash Posted June 9, 2010 Author Report Share Posted June 9, 2010 Специально для тебя psywalker:onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;"Это чтоб вопросов более не возникало 1 Link to comment Share on other sites More sharing options...
psywalker Posted June 9, 2010 Report Share Posted June 9, 2010 Специально для тебя psywalker:onchange="this.parentNode.getElementsByTagName('input')[0].value = this.options[this.selectedIndex].text;"Это чтоб вопросов более не возникало Вот эт другой разговор, благодарю 1 Link to comment Share on other sites More sharing options...
psywalker Posted June 10, 2010 Report Share Posted June 10, 2010 Кстати вопрос: Выходит, что свойство innerHTML выцепляет весь текст, даже комментарии, а свойство .text только чисто текст? 1 Link to comment Share on other sites More sharing options...
Great Rash Posted June 10, 2010 Author Report Share Posted June 10, 2010 Лично я не тестил, но, судя по словам s0rr0w, выходит что так. Собери тестовую страницу да посмотри, в чем проблема. 1 Link to comment Share on other sites More sharing options...
psywalker Posted June 10, 2010 Report Share Posted June 10, 2010 Лично я не тестил, но, судя по словам s0rr0w, выходит что так. Собери тестовую страницу да посмотри, в чем проблема.Давай дружище, потом отпиши сразу. 1 Link to comment Share on other sites More sharing options...
Great Rash Posted June 10, 2010 Author Report Share Posted June 10, 2010 Чего давай, я тебе предлагал 1 Link to comment Share on other sites More sharing options...
psywalker Posted June 10, 2010 Report Share Posted June 10, 2010 Чего давай, я тебе предлагал А я проверял, вроде s0rr0w прав. Но если ты подтвердишь, то я точно буду спокоен. 1 Link to comment Share on other sites More sharing options...
Great Rash Posted June 10, 2010 Author Report Share Posted June 10, 2010 Подтверждаю 1 Link to comment Share on other sites More sharing options...
psywalker Posted June 10, 2010 Report Share Posted June 10, 2010 Подтверждаю Уфф, ну слава богу, теперь можно жить дальше 1 Link to comment Share on other sites More sharing options...
Recommended Posts