Архивировано

Эта тема находится в архиве и закрыта для публикации сообщений.

Wile E

Проблема с тегом select

Рекомендованные сообщения

Здравствуйте, дорогие форумчане. Я - новичок самоучка, поэтому для вас проблема может быть не очень сложная.

Мне нужно сделать выпадающий список, как на рисунке. Интересует меня то, как сделать такие оглавления, как на изображении ("по сторам", "по товару"), чтоб они не выпадали вместе с option. 

Простите, если не совсем понятно и корректно выражаюсь!

select.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Select может отображаться в разных браузерах по разному. Я бы не рисковал кастомизировать его.

Можно сделать все выпадающими менюшкам. Но придется поколдовать на js.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Есть готовые решения в виде плагинов.

Можно пойти другим путем, к примеру:

https://www.howtomake.com.ua/front/stilizaciya-vsex-elementov-form-s-pomoshhyu-css-i-jquery.html

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

спасибо большое, у меня все получилось благодаря примеру, что Вы мне скинули )

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

  • Похожие публикации

    • Автор: maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
    • Автор: Vic-Tor
      Добры день!
      Подскажите пожалуйста, или неправильно формулирую запрос или туплю?
      Нужно простое всплывающее html окно с крестиком или кнопкой "ЗАКРЫТЬ" масштабом в 2/3 от стандартного.
      Например, у товара есть кнопка "ПОДРОБНЕЕ", хочу сделать, что бы открывалось окно с описанием и фото.
      СПАСИБО!
    • Автор: qwerty_me
      Здравствуйте.Возникла проблема со следующим заданием:вывести всплывающее окно, запрашивающее имя пользователя, затем вывести сегодняшнюю дату на экран(её можно увидеть после всего цикла окон),потом задать вопрос касательно обучения в группе(если да-цикл продолжается, нет-вывести окно с отказом),далее ещё одно вводное окно,а потом через всплывающие окна запросить у пользователся значения a,b,c для решения квадратного уравнения.Суть проблемы:как только после  if-а, отвечающего за запрос о принадлежности к группе,браузер перестаёт отображать остальные окна и простую инфу о дате,которая просто выводится на экран. Подскажите,пожалуйста,как можно пофиксить эту проблему.Всё никак не могу найти причину этого.Мой одногруппник написал похожий код и у него всё работает,но при сравнении я не увидел каких-то кардинальных различий.Свой и его код прикрепил ниже.Буду весьма признателен за вашу помощь,у меня уже просто нет вариантов,что не так с моим кодом:/
      Мой код:
      <html>
      <head>
      <title>вывод различной инфы через всплывающие окна</title>
      </head>
      <body>
      <p id="nameUser"></p>
      <script>
        var nameUser=prompt("Введите Ваше имя пользователя.");
        if (nameUser) {
            document.getElementById("nameUser").innerHTML = nameUser +",Здравствуйте, добро пожаловать на сайт!";
          }
          else {
            document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!";
          }
          Data = new Date();
          Year = Data.getFullYear();
          Month = Data.getMonth();
          Day = Data.getDate();
          switch (Month)
          {
            case 0:  Month="января"; break;
            case 1:  Month="февраля"; break;
            case 2:  Month="марта"; break;
            case 3:  Month="апреля"; break;
            case 4:  Month="мае"; break;
            case 5:  Month="июня"; break;
            case 6:  Month="июля"; break;
            case 7:  Month="августа"; break;
            case 8:  Month="сентября"; break;
            case 9:  Month="октября"; break;
            case 10: Month="ноября"; break;
            case 11: Month="декабря"; break;
          }
          document.write("Сегодня "+Day+" "+Month+" "+Year+" года.");
          if(confirm("Вы учитесь в группе ЭИ-38?"))
            {
            alert("Добро пожаловать на страницу, посвященную лабораторной работе по изучению основ JavaScript!")
            alert("Решите квадратное уравнение: ax^2 + bx + с = 0, где а не равно 0,используя введённые числа для a,b,c")
            a=prompt("Введите значение а")
            b=prompt("Введите значение b")
            c=prompt("Введите значение c")
            var d = b * b - 4 * a * c;
            if(d > 0)
            {
            x1=(( - b)+(Math.sqrt(d)))/(2 * a)
            x2=(( - b)-(Math.sqrt(d)))/(2 * a)
            alert("Корни уравнений:x1="+ x1 +"x2="+ x2 +)
            document.write("Корни уравнений:x1="+ x1 +"x2="+ x2 +);
            }
            if(d == 0)
            {
            x1 = (- b) /( 2 * a)
            alert("Корень уравнения:x1= ",+ x1)
            document.write("Корень уравнения:x1="+ x1 +);
            }
            if(d < 0)
            {
            alert("с введёнными значениями квадратное уравнение не имеет корней")
            }
          }
            else
            {
            alert("Извините, вход только для своих.")
          }
      </script>
      </body>
      </html>
      ниже оригиналы моего кода и одногруппника.
      index try2.htm
      variant znakomogo.htm
The Beginner JavaScript Programming Course