Как сделать плоский select ?
От: Аноним  
Дата: 15.10.03 01:51
Оценка:
Как сделать плоский select ?
Re: Как сделать плоский select ?
От: Specht США http://askthecloudguy.com
Дата: 15.10.03 02:43
Оценка: -1
Здравствуйте, Аноним, Вы писали:

А>Как сделать плоский select ?
Если речь идет о ХТМЛ селекте (дроп дауне), то никак. Я в свое время столько докумнтации перелопатил... Это один из немногих элементов, которые не поддаются никакой модификации — даже поверх никаких слоев не поместишь, з-индекс селекта всегда больше любого. Единственное, что можно менять, — это стили шрифта и бэкграунда. Альтернатива — написать джаваскрипт по функциональности заменяющий стандартный селект, либо пользоваться флэшом — там щас элементы форм есть всякие — очень удобно.
Re: Как сделать плоский select ?
От: Andir Россия
Дата: 15.10.03 03:08
Оценка:
Здравствуйте, Аноним, Вы писали:

А>Как сделать плоский select ?

Нарисовать свой. Эмулировать с помощью Элемента с абсолютным позиционированием.

С Уважением, Andir!
Re: Как сделать плоский select ?
От: andik  
Дата: 15.10.03 07:16
Оценка: +1
Здравствуйте, <Аноним>, Вы писали:

А>Как сделать плоский select ?

Вот здесь Sinclair предлагал решение
http://rsdn.ru/Forum/Message.aspx?mid=283047&amp;only=1
Автор: Sinclair
Дата: 01.06.03
... << RSDN@Home 1.0 beta 7a >>
Re[2]: Как сделать плоский select ?
От: anonymous Россия http://denis.ibaev.name/
Дата: 15.10.03 12:49
Оценка: 1 (1)
Здравствуйте, andik, Вы писали:

A>Здравствуйте, <Аноним>, Вы писали:

А>>Как сделать плоский select ?

A>Вот здесь Sinclair предлагал решение
A>http://rsdn.ru/Forum/Message.aspx?mid=283047&amp;only=1
Автор: Sinclair
Дата: 01.06.03


попробовал сделать такую вещь... получилось весьма недурно... ) по крайней мере в IE...
<html>
  <head>
    <style type="text/css">
      <!--
div.select-element
{
    border-color: #000000;
    border-style: none solid solid;
    border-width: 1px;
    overflow: hidden;
    width: 150px;
}
div.select-element select
{
    margin: -2px;
    width: 152px;
}
      -->
    </style>
  </head>
  <body>
    <div class="select-element">
      <select style="font-family: Tahoma;">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
      </select>
    </div>
  </body>
<html>
Re[3]: Как сделать плоский select ?
От: andik  
Дата: 15.10.03 13:18
Оценка: -1
Здравствуйте, anonymous, Вы писали:


A>попробовал сделать такую вещь... получилось весьма недурно... ) по крайней мере в IE...

Я тут потренеровался на Opera, Netscape6, IE. Практически одинаково смотриться
вот так будет лучше

<html>
  <head>
    <style type="text/css">
      <!--
div.select-element
{
    border-color: #000000;
    border-style: none solid solid;
    border-width: 1px;
    overflow: hidden;
    width: 150px;
}
div.select-element select
{
    margin-top: -1px;
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: -2px;
    width: 152px;
}
      -->
    </style>
  </head>
  <body>
    <div class="select-element">
      <select style="font-family: Tahoma;">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
      </select>
    </div>
  </body>
<html>
... << RSDN@Home 1.0 beta 7a >>
Re[3]: Как сделать плоский select ?
От: Sinclair Россия https://github.com/evilguest/
Дата: 15.10.03 13:59
Оценка: 1 (1)
Здравствуйте, anonymous, Вы писали:

A>попробовал сделать такую вещь... получилось весьма недурно... ) по крайней мере в IE...
О! Прикольно. Таким образом вполне лаконично размечаются селекты. Я бы даже сделал вот так:
div.flattenselect
{
    border-color: #000000;
    border-style: none solid solid;
    border-width: 1px;
    overflow: hidden;
    width: expression(this.firstChild.clientWidth-2);
}
div.flattenselect select
{
    margin: -2px;
}

(если уж речь идет об IE)
... << RSDN@Home 1.1 beta 2 >>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re[4]: Как сделать плоский select ?
От: Grog13 Финляндия  
Дата: 13.07.04 12:02
Оценка:
Здравствуйте, Sinclair, Вы писали:

S>Здравствуйте, anonymous, Вы писали:

A>>попробовал сделать такую вещь... получилось весьма недурно... ) по крайней мере в IE...
S>О! Прикольно. Таким образом вполне лаконично размечаются селекты. Я бы даже сделал вот так:
S>
S>div.flattenselect
S>{
S>    border-color: #000000;
S>    border-style: none solid solid;
S>    border-width: 1px;
S>    overflow: hidden;
S>    width: expression(this.firstChild.clientWidth-2);
S>}
S>div.flattenselect select
S>{
S>    margin: -2px;
S>}
S>


А как сделать если у меня в % задана ширина этого select'a?

Т.е. я делаю так:

div.select-element
{
    border : 1px black solid;
    overflow: hidden;
    width: 90%;
}
div.select-element select
{
    margin : -2px;
    width  : 100%;
}


и HTML

 ...
 <tr>
  <td align="left" valign="top"><div class="text">Тип заявки:</div></td>
  <td><div class="select-element">
  <select name="aaa">
    <OPTION>Выберете тип заявки
    <OPTION>1
    <OPTION>2
  </select></div></td>
 </tr>


но селект делается короче на 2px чем другие контролы (мне надо что бы контролы занимали 90% ячейки таблицы — и все работают, кроме него). Ширина ячеек таблицы прописана в самом верхнем tr.
Установка margin-right: 0px не помогла.
Может тоже как то с expression можно сделать?
Re[5]: Как сделать плоский select ?
От: Sinclair Россия https://github.com/evilguest/
Дата: 13.07.04 16:50
Оценка: 3 (1)
Здравствуйте, Grog13, Вы писали:
G>но селект делается короче на 2px чем другие контролы (мне надо что бы контролы занимали 90% ячейки таблицы — и все работают, кроме него). Ширина ячеек таблицы прописана в самом верхнем tr.
G>Установка margin-right: 0px не помогла.
G>Может тоже как то с expression можно сделать?
Попробуй вот так: 
<STYLE>
div.select-element
{
    border : 1px black solid;
    overflow: hidden;
    width: 90%;
}
div.select-element select
{
    margin : -2px;
    width  : expression(this.parentNode.clientWidth+4);
}
</STYLE> 
<BODY>
 <tr>
  <td align="left" valign="top"><div class="text">Тип заявки:</div></td>
  <td><div class="select-element">
  <select name="aaa">
    <OPTION>Выберете тип заявки
    <OPTION>1
    <OPTION>2
  </select></div></td>
 </tr>
 
</BODY>

Учти, у меня конкретно это работает, но в сочетании с еще всякими стилями периодически вешает експлорер. Подозреваю, что надо делать так, чтобы в списке стилей эти два шли среди последних, а иначе там получается бесконечная рекурсия.
... << RSDN@Home 1.1.4 beta 1 >>
Уйдемте отсюда, Румата! У вас слишком богатые погреба.
Re[6]: Как сделать плоский select ?
От: L0kY  
Дата: 14.01.05 06:45
Оценка: +1
Сам долго искал как это сделать... вот, нашел вашу идею — Супер!
Единственное дополнение, которое хочу сделать: можно <div> заменить на <span>!
Это для того, чтобы разместить несколько select'ов в одну строку, не задавая дополнительно положения объекта и не вставляя все селекты во вспомогательную табличку, для выстраивания (если в строке несколько select'ов и каждый из них внутри div'а, то каждый select переносятся на новую строку).

З.Ы. просто мне требовалось изменить стили трех селектов идущих подряд в одной строке (день, месяц, год)
Re[7]: Как сделать плоский select ?
От: ЖуК Украина http://smart-ip.net/
Дата: 14.01.05 13:29
Оценка:
Здравствуйте, L0kY, Вы писали:

LY>Сам долго искал как это сделать... вот, нашел вашу идею — Супер!
LY>Единственное дополнение, которое хочу сделать: можно <div> заменить на <span>!
LY>Это для того, чтобы разместить несколько select'ов в одну строку, не задавая дополнительно положения объекта и не вставляя все селекты во вспомогательную табличку, для выстраивания (если в строке несколько select'ов и каждый из них внутри div'а, то каждый select переносятся на новую строку).

LY>З.Ы. просто мне требовалось изменить стили трех селектов идущих подряд в одной строке (день, месяц, год)

Можно и DIV оставить, просто приколбасить ему стиль display:inline
_____________________________________________________________
"Голова — кость, поэтому болеть не может..." © Неизвестный автор
Re[8]: Как сделать плоский select ?
От: anonymous Россия http://denis.ibaev.name/
Дата: 14.01.05 13:30
Оценка:
Здравствуйте, ЖуК, Вы писали:

LY>>Сам долго искал как это сделать... вот, нашел вашу идею — Супер!
LY>>Единственное дополнение, которое хочу сделать: можно <div> заменить на <span>!
LY>>Это для того, чтобы разместить несколько select'ов в одну строку, не задавая дополнительно положения объекта и не вставляя все селекты во вспомогательную табличку, для выстраивания (если в строке несколько select'ов и каждый из них внутри div'а, то каждый select переносятся на новую строку).
LY>>З.Ы. просто мне требовалось изменить стили трех селектов идущих подряд в одной строке (день, месяц, год)
ЖуК>Можно и DIV оставить, просто приколбасить ему стиль display:inline

или float:left|right
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.