VPF::<select> - Форум программистов

Гость_Сергей

Дата 27.4.2005, 10:25 (ссылка)

(голосов: 1)

Загрузка ...

Unregistered

Вот есть такая запись

CSS
input {border: 1 solid}
select {border: 1 solid}

HTML
<input type=text name=qq>
<select name=ww size=1>
<option value=a1>value 1</option>
<option value=a2>value 2</option>
</select>

Почему строка с текстом получается с границей в 1 пиксель, а у поля выбора граница остаётся прежней с тенями и некрасивой.

Как тогда сделать, чтобы у поля выбора тоже можно было сделать границу в 1 пиксель?

Irokez

Дата 27.4.2005, 10:33 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 3
Всего: 53

просто стилями не получится, выход есть такой:
надо селектбокс засунуть в <div>, у которого с помощью clip - отрезать границы селектбокса, а затем поставить границу для дива

--------------------

Irokez CM - открытая система управления сайтами

PARROT

Дата 27.4.2005, 10:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

Код


<input type=text style="border: 1 solid;">

Для селекта незнаю как.
Добавлено @ 10:37
А как отрезать clip -ом??? smile

Это сообщение отредактировал(а) PARROT - 27.4.2005, 10:34

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

dm9

Дата 27.4.2005, 10:44 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Хороший вопрос smile

Я найти решения не смог. Могу порекомендовать найти хороший скрипт выпадающего меню (или спросить народ в форуме JavaScript) и использовать его smile

Если найдёте решение, напишите сюда, пожалуйста.

PS Для более строгих, чем Internet Explorer, браузеров, стоит прописывать единицы измерения: не "1 solid", а "1px solid".

PPS Вариант с дивом интересен, сейчас попробую smile

dm9

Дата 27.4.2005, 11:02 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Irokez, у меня что-то не хочет clip работать. Покажи, как это сделать можно smile

PARROT

Дата 27.4.2005, 11:06 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 2
Всего: 50

Ну вот у меня так получается, но это не совсем верно:

Код


<input type=text name=qq style="border: 1px solid;">
<div style="border: 1px solid;width:60;"><select name=ww clip>
<option value=a1>value 1</option>
<option value=a2>value 2</option>
</select></div>

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Гость_Сергей

Дата 27.4.2005, 12:06 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

не получается.
clip не убирает рамку у селекта.

Irokez

Дата 27.4.2005, 12:18 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 3
Всего: 53

Цитата(dm9 @ 27.4.2005, 11:02)

Irokez, у меня что-то не хочет clip работать. Покажи, как это сделать можно smile

да вот пожалуста:

Код


<html>
<head>
<title>
</title>
<style>
.input-select
{
    width:150px;
    margin:0px;
    padding:0px;
    position:absolute;
    clip:rect(2px 500px 19px 2px);
    background-color:#ffffff;
}
.input-select-div
{
    padding:0px;
    width:152px;
    height:22px;
    border:solid 1px #000000;
}
</style>
</head>
<body>
<div class="input-select-div">
<select class="input-select">
<option value=1>one 
<option value=2>two 
<option value=3>three 
</select>
</div>
</body>
</hmtl>

--------------------

Irokez CM - открытая система управления сайтами

dm9

Дата 27.4.2005, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Irokez, классно smile

Только не очень красиво выглядит. Пробовал подобрать числа, чтоб было красиво (там ещё надо добавить overflow: hidden для дива). К сожалению, для каждого браузера свои плюс-минус один-два пикселя, это всё портит. Если только на JavaScript стили под каждый браузер переписывать.

PS С меня плюс за то, что научил использовать position:absolute; smile

Я его только в связке с left: xxx; top: yyy; использовал до этого.

Irokez

Дата 27.4.2005, 20:56 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 3
Всего: 53

Цитата(dm9 @ 27.4.2005, 20:51)

К сожалению, для каждого браузера свои плюс-минус один-два пикселя, это всё портит. Если только на JavaScript стили под каждый браузер переписывать.

ява скрипт тут не нужен, покажу одну хитрость (на вебмасконе перенял)

Код


margin: 5px; /*работает в ИЕ, ФФ, Опере*/
margin: "10px"; /*работает только в ИЕ*/

в итоге, в ФФ и Опере отступ будет равен 5, а в ИЕ - 10 пикселям

--------------------

Irokez CM - открытая система управления сайтами

dm9

Дата 27.4.2005, 21:02 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Приколист

)))

Но тут ещё такая фишка. Под Оперу и Firefox тоже нужны разные маржины и границы дива и клипа...

Irokez

Дата 27.4.2005, 21:07 (ссылка)

(нет голосов)

Загрузка ...

индеец

Профиль
Группа: Участник Клуба
Сообщений: 1180
Регистрация: 20.10.2004

Репутация: 3
Всего: 53

Цитата(dm9 @ 27.4.2005, 21:02)

Но тут ещё такая фишка. Под Оперу и Firefox тоже нужны разные маржины и границы дива и клипа...

тогда облом .. только яваскриптом smile

--------------------

Irokez CM - открытая система управления сайтами

Гость_Сергей

Дата 29.4.2005, 09:35 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

действительно получается. но не совсем.
вот у меня идут подряд 3 списка <select>, но после clip и position:absolute и вставки <div>, они располагаются каждый на новой строке.
если же все три списка загоняю в один <div>, то абсолютное позиционирование держит их на одном месте друг под другом.
отсюда вопрос.
как между </div> и <div> убрать перенос строки?
если нельзя, то как отпозиционировать все три списка, чтобы они отображались на одной строке поочереди, а не друг под другом?

dm9

Дата 29.4.2005, 10:12 (ссылка)

(нет голосов)

Загрузка ...

Дмитрий Копытин

Профиль
Группа: Vingrad developer
Сообщений: 3876
Регистрация: 22.7.2002
Где: Москва

Репутация: 29
Всего: 137

Цитата

как между </div> и <div> убрать перенос строки?

Попробуй стиль display: inline;

Добавлено @ 10:12
В смысле, это стиль для этих дивов...

Гость_Сергей

Дата 4.5.2005, 16:19 (ссылка)

(голосов: 0)

Загрузка ...

Unregistered

А как тогда ещё кнопки выбора поменять?
хочу, чтоб она была белая, стрелочка чёрная, рамка в 1 пиксель чёрная.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »