<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>База данных</title>
</head>
<body>
<span style="border: 4px solid red;">
<SELECT name="str">
<OPTION>ул.</OPTION>
<OPTION>пер.</OPTION>
<OPTION>шоссе</OPTION>
</SELECT>
</span>
</body>
</html>
Рамка у Select'a
В общем столкнулся с проблемой образования нормального стиля рамки у тега select. Обычными солидами не обойтись - пробовал создавать рамку у div'a и в него вставлял select со скрытой рамкой - ничего вразумительного не получилось. Если возможно, выложите код с описание как это можно сделать.
Цитата:
Originally posted by Lohotron
В общем столкнулся с проблемой образования нормального стиля рамки у тега select. Обычными солидами не обойтись - пробовал создавать рамку у div'a и в него вставлял select со скрытой рамкой - ничего вразумительного не получилось. Если возможно, выложите код с описание как это можно сделать.
В общем столкнулся с проблемой образования нормального стиля рамки у тега select. Обычными солидами не обойтись - пробовал создавать рамку у div'a и в него вставлял select со скрытой рамкой - ничего вразумительного не получилось. Если возможно, выложите код с описание как это можно сделать.
А покажи, как ты div'ом делал. Просто другого способа нет. Разве что написать свой select'о-подобный select.
Цитата:
Originally posted by Lohotron
В общем столкнулся с проблемой образования нормального стиля рамки у тега select. Обычными солидами не обойтись - пробовал создавать рамку у div'a и в него вставлял select со скрытой рамкой - ничего вразумительного не получилось. Если возможно, выложите код с описание как это можно сделать.
В общем столкнулся с проблемой образования нормального стиля рамки у тега select. Обычными солидами не обойтись - пробовал создавать рамку у div'a и в него вставлял select со скрытой рамкой - ничего вразумительного не получилось. Если возможно, выложите код с описание как это можно сделать.
"Матчасть учим!" (с)
Код:
Оно?
Цитата:
Originally posted by mfender
А покажи, как ты div'ом делал. Просто другого способа нет. Разве что написать свой select'о-подобный select.
А покажи, как ты div'ом делал. Просто другого способа нет. Разве что написать свой select'о-подобный select.
К сожалению давненько это было, уже не помню точно,какими средствами пользовался, по этому и попросил пример кода :(
Цитата:
Originally posted by alekciy
"Матчасть учим!" (с)
Оно?
"Матчасть учим!" (с)
Оно?
нед, нужно изменить рамку а недобавить поверх существующей еще одну.
Цитата:
Originally posted by Lohotron
нед, нужно изменить рамку а недобавить поверх существующей еще одну.
нед, нужно изменить рамку а недобавить поверх существующей еще одну.
Что бы рамка изменялась при наведении курсора на SELECT? Так это JS тогда, а не CSS тебе нужен. А в CSS все останется так, как я и написал.
Цитата:
Originally posted by Lohotron
нед, нужно изменить рамку а недобавить поверх существующей еще одну.
нед, нужно изменить рамку а недобавить поверх существующей еще одну.
Такое чудо - только в Опере. Остальные браузеры исползуют виндовый комбо-бокс, который прорисовывается совсем иначе, чем прочие элементы ввода. Обращал внимание когда-нибудь, что все select'ы выползают выше flash-роликов?
Цитата:
Originally posted by mfender
Такое чудо - только в Опере. Остальные браузеры исползуют виндовый комбо-бокс, который прорисовывается совсем иначе, чем прочие элементы ввода. Обращал внимание когда-нибудь, что все select'ы выползают выше flash-роликов?
Такое чудо - только в Опере. Остальные браузеры исползуют виндовый комбо-бокс, который прорисовывается совсем иначе, чем прочие элементы ввода. Обращал внимание когда-нибудь, что все select'ы выползают выше flash-роликов?
Я точно помню, что средствами css можно эту рамку вообще убрать (а потом налепить рамку с помошью того же div-а или span-а), вот только как это сделать по умному?:/
Есть извратный способ, который мне посоветовали - но он никуда не годиться:
Код:
<SELECT size=1 style="position:absolute;width:100px;
clip:rect(2px 82px 20px 2px);background:pink;top:10px;">
<OPTION VALUE=1>One
<OPTION VALUE=2>Two
<OPTION VALUE=3>Three
</SELECT>
clip:rect(2px 82px 20px 2px);background:pink;top:10px;">
<OPTION VALUE=1>One
<OPTION VALUE=2>Two
<OPTION VALUE=3>Three
</SELECT>
Еще вот так пробовал:
работает в ИЕ, но не хочет убирать рамку select-а в мозиле.
Код:
<style>
.outer {
border:1px solid #1F6DB4;
background-color: #ffffff;
display: table;
width:1px;
}
.outer select {
border: transparent;
background-color: transparent;
margin: -3px;
overflow: auto;
color:#1F6DB4;
height:18px
font-size: 8pt;
font-family:tahoma;
}
html>body .outer select {
margin: -2px;
}
</style>
<div class="outer">
<select style="width:117px" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
.outer {
border:1px solid #1F6DB4;
background-color: #ffffff;
display: table;
width:1px;
}
.outer select {
border: transparent;
background-color: transparent;
margin: -3px;
overflow: auto;
color:#1F6DB4;
height:18px
font-size: 8pt;
font-family:tahoma;
}
html>body .outer select {
margin: -2px;
}
</style>
<div class="outer">
<select style="width:117px" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
работает в ИЕ, но не хочет убирать рамку select-а в мозиле.
в мозиллах, так же как и в новой опере, outer > select {border: none;} убирает рамку.
Цитата:
Originally posted by Lohotron
Я точно помню, что средствами css можно эту рамку вообще убрать (а потом налепить рамку с помошью того же div-а или span-а), вот только как это сделать по умному?:/
Я точно помню, что средствами css можно эту рамку вообще убрать (а потом налепить рамку с помошью того же div-а или span-а), вот только как это сделать по умному?:/
Матчасть все же учим. Средствами CSS это сделать нельзя. Способы связанные с фичами/глюками разных браузеров я за способ решения сабжа не беру. Изврат это. Так же как и делать усечение. Потому как это не убирание рамки, а её обрезка (скрытие).
Цитата:
Originally posted by -no-
в мозиллах, так же как и в новой опере, outer > select {border: none;} убирает рамку.
в мозиллах, так же как и в новой опере, outer > select {border: none;} убирает рамку.
К сожалению не помогло, по крайней мере в пятой версии мозилы.
Поищи программу, которой выполняется изменить рамку. Например, скачай отсюда.
Советую использовать таблицу.
В ячейках таблицы удобно располагать элементы формы.
[HTML]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>База данных</title>
</head>
<body>
<Table CellSpacing=0 CellPadding=0 Style="Border:Solid Red 4px">
<TR><TD>
<SELECT name="str">
<OPTION>ул.</OPTION>
<OPTION>пер.</OPTION>
<OPTION>шоссе</OPTION>
</SELECT>
</Table>
</body>
</html>
[/HTML]
Поэкспериментируйте с параметрами таблицы.
CellSpacing - расстояние между ячейками.
CellPadding - "поля" ячейки, т.е. расстояние между краями ячейки и содержимым.
Вместо слова Solid (сплошная рамка) можно использовать
None, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset.
Вместо Red можно указать любой другой цвет.
Вместо 4px можно указать любой другую толщину.
Тег <TR> означает начало новой строки таблицы.
Тег <TD> означает начало новой ячейки в той же строке.
В ячейках таблицы удобно располагать элементы формы.
[HTML]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>База данных</title>
</head>
<body>
<Table CellSpacing=0 CellPadding=0 Style="Border:Solid Red 4px">
<TR><TD>
<SELECT name="str">
<OPTION>ул.</OPTION>
<OPTION>пер.</OPTION>
<OPTION>шоссе</OPTION>
</SELECT>
</Table>
</body>
</html>
[/HTML]
Поэкспериментируйте с параметрами таблицы.
CellSpacing - расстояние между ячейками.
CellPadding - "поля" ячейки, т.е. расстояние между краями ячейки и содержимым.
Вместо слова Solid (сплошная рамка) можно использовать
None, Dotted, Dashed, Double, Groove, Ridge, Inset, Outset.
Вместо Red можно указать любой другой цвет.
Вместо 4px можно указать любой другую толщину.
Тег <TR> означает начало новой строки таблицы.
Тег <TD> означает начало новой ячейки в той же строке.