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 пиксель чёрная.

dm9

Дата 4.5.2005, 23:05 (ссылка)

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

Загрузка ...

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

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

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

Думаю, никак smile

Смотри мой первый вариант.

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

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

Aliance

Дата 22.5.2005, 23:00 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Вот нашел оригинальный способ группировки для select`а:

Код


<form>
<p>Справочники:</p>
 <select name="ask">
 <optgroup label="HTML">
  <option label="3.2">HTML 3.2
  <option label="4.0">HTML 4.0
 </optgroup>
 <optgroup label="CSS">
  <option label="1">CSS-1
  <option label="1">CSS-2
  <option label="3">CSS-3
 </optgroup>
  <option value="js">JavaScript
  <option value="dhtml">DHTML
 </select></p>
</form>

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Irokez

Дата 23.5.2005, 11:38 (ссылка)

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

Загрузка ...

индеец

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

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

Цитата(Aliance @ 22.5.2005, 23:00)

Вот нашел оригинальный способ группировки для select`а:

а что оригинального smile

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

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

liliana2

Дата 31.3.2009, 09:44 (ссылка)

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

Загрузка ...

Бывалый

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

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

Цитата(dm9 @ 4.5.2005, 23:05)

Думаю, никак smile

Смотри мой первый вариант.

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

А непосредетсвенно сам скрипт ен порекомендуете? Буду премного благодарна

Violator

Дата 31.3.2009, 12:02 (ссылка)

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

Загрузка ...

Бывалый

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

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

liliana2,
скачайте библиотеку jquery
http://docs.jquery.com/Downloading_jQuery

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
    $(document).ready(function() {
      $("#dd_currency").mouseover(function () {
          $("#curr_list").removeClass("hidden");
      });
      $("#dd_currency").mouseout(function () {
          $("#curr_list").addClass("hidden");
      });
      $("#curr_list a").bind("click", function() {
        $("#curr_list").addClass("hidden");
        $("#currency").attr("value", $(this).attr("id"));
        $("#curr_selected").text($(this).text());
        return false;
      });
    });
  </script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .hidden {
      display: none;
    }
    .dropdown {
      font: 11px arial;
      border: 1px solid #08488d;
      background-color: #d4e2f7;
      background-image: url(arrow.gif);
      background-repeat: no-repeat;
    }
    .dropdown a {
      display: block;
      color: #262626;
      background-color: #d4e2f7;
      padding: 3px 10px;
      text-decoration: none;
    }
    .dropdown a:hover {
      background-color: #e5ecf5;
    }
    #curr_selected {
      color: #262626;
      padding: 3px 10px;
      cursor: pointer;
    }
    #dd_currency {
      width: 155px;
      background-position: 138px 8px;
    }
    * html .dropdown a {
      height: 1%;
    }
  </style>
</head>

<body>
  <form method="post" action="/">
    <input id="currency" type="hidden" name="currency" value="aud" />
    <div id="dd_currency" class="dropdown">
      <div id="curr_selected">Australian dollar (AUD)</div>
      <div id="curr_list" class="hidden">
        <a id="aud" href="#">Australian dollar (AUD)</a>
        <a id="cad" href="#">Canadian dollar (CAD)</a>
        <a id="czk" href="#">Czech coruna (CZK)</a>
        <a id="huf" href="#">Hungarian forint (HUF)</a>
      </div>
    </div>
  </form>
</body>
</html>

Это сообщение отредактировал(а) Violator - 31.3.2009, 12:05

Присоединённый файл ( Кол-во скачиваний: 7 )

arrow.gif 0,05 Kb

liliana2

Дата 31.3.2009, 14:38 (ссылка)

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

Загрузка ...

Бывалый

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

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

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

Это сообщение отредактировал(а) liliana2 - 31.3.2009, 14:39

liliana2

Дата 1.4.2009, 06:58 (ссылка)

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

Загрузка ...

Бывалый

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

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

ага, разобралась, что бибилиотеку нужно подключать, вставила ваш код, все отлично смотрится, и теперь даже работает, а можно ли как то сделать чтобы он раскрывался не пр наведении а при клике? пробовала заменить mouseover на onclick - не помогает

Это сообщение отредактировал(а) liliana2 - 1.4.2009, 07:16

Violator

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

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

Загрузка ...

Бывалый

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

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

Код


    $(document).ready(function() {
      $("#curr_selected").bind("click", function() {
        $("#curr_list").toggleClass("hidden");
      });
      $("#curr_list a").bind("click", function() {
        $("#curr_list").addClass("hidden");
        $("#currency").attr("value", $(this).attr("id"));
        $("#curr_selected").text($(this).text());
        return false;
      });
    });

Это сообщение отредактировал(а) Violator - 1.4.2009, 12:16

liliana2

Дата 1.4.2009, 12:27 (ссылка)

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

Загрузка ...

Бывалый

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

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

спасибо огромное, где тут кнопка "сказать спасибо", только еще один вопрос, этот самодельный селект будет работат как элемент формы, то есть там данные в форму посылать и так далее?

Violator

Дата 1.4.2009, 12:34 (ссылка)

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

Загрузка ...

Бывалый

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

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

liliana2,
да, будут отсылатся

liliana2

Дата 6.4.2009, 06:09 (ссылка)

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

Загрузка ...

Бывалый

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

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

еще такой вопрос, у меня на странице не один селект, ну и соотвественно чтобы все работало правильно каждому задается свои id, а как сделать это в одном скрипте?

liliana2

Дата 7.4.2009, 06:16 (ссылка)

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

Загрузка ...

Бывалый

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

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

И еще хотелось бы чтобы этот селеккт схлопывался когда убираешь мышь или щелкаешь мимо, а не как простое выпадающее меню, то есть по поведению юлиже к селекту

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