Убрать скролл css: Как стилизовать или убрать полосу прокрутки — CSS скроллбар — Active-Vision

HTML свойства тега textarea — студия Палыча

Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.

Размеры textarea

Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).

<textarea cols="30" rows="5"></textarea>

Или указывать размер в CSS свойствах:

textarea {
    width  : 450px;
    height : 120px;
}

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

Замещающий текст в HTML5

Существует новый атрибут в качестве части формы HTML5, называется

<textarea placeholder="Замещающий текст" cols="30" rows="5"></textarea>

Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.

<textarea cols="20" onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';">поиск...</textarea>
 

Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.

Как убрать свечение у textarea?

Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:

textarea {
    outline : none;
}

Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта.

Как удалить маркер изменения размера у textarea?

Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:

textarea {
    resize : none;
}

Nowrap — убрать переносы

Чтобы текст автоматически не переносился, в CSS можно использовать #whatever { white-space: nowrap}

<textarea wrap="off" cols="30" rows="5"></textarea>

Как убрать полосу прокрутки textarea в Internet Explorer?

IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через

textarea {
    overflow : auto;
}

Источник: Textarea tricks

overflow-block — CSS | MDN

CSS свойство overflow-block устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

Свойтсво overflow-block отображается на overflow-y или overflow-x в зависимости от режима записи документа.

overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;


overflow-block: inherit;
overflow-block: initial;
overflow-block: unset;

Свойство overflow-block указывается как одно ключевое слово, выбранное из списка значений ниже.

Значения

visible

Содержимое не обрезается и может отображаться за пределами начального и конечного краев блока отступа.

hidden

При необходимости содержимое обрезается, чтобы соответствовать размеру блока в поле заполнения. Полосы прокрутки отсутствуют.

scroll

При необходимости содержимое обрезается, чтобы поместиться в размер блока в поле заполнения. Браузеры отображают полосы прокрутки вне зависимости от того, вырезано ли содержимое. (Это предотвращает появление или исчезновение полос прокрутки при изменении содержимого.) Принтеры могут по-прежнему печатать переполненное содержимое.

auto

Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но все же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

Формат синтаксиса

visible | hidden | clip | scroll | auto

HTML

<ul>
  <li><code>overflow-block:hidden</code> — скрывает текст за пределами поля
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:visible</code> — отображает текст вне поля, если это необходимо
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li><code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно <code>scroll</code>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

 

CSS

#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width:  250px;
  height: 100px;
}

#div1 { overflow-block: hidden; margin-bottom: 12px;}
#div2 { overflow-block: scroll; margin-bottom: 12px;}
#div3 { overflow-block: visible; margin-bottom: 120px;}
#div4 { overflow-block: auto; margin-bottom: 120px;}

Результат

BCD tables only load in the browser

css — Скрыть вертикальную полосу прокрутки, но все еще прокручивать для Firefox / IE / Edge

Я знаю, что здесь многое было рассмотрено, но ни одно из решений, похоже, не работает для меня.

Note: I don't want to mess with padding/margins

Я могу заставить его исчезнуть, но я теряю функциональность прокрутки. Вот некоторые из вещей, которые я пробовал, и я могу забыть некоторые из них, поскольку я прошел через очень много итераций.

::-webkit-scrollbar { width: 0px; }
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
overflow: -moz-hidden-scrollable;

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

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

Я пытаюсь достичь этого с помощью чистого CSS. Идеи ?

Текущий код

.rec-left--body {
      padding: 0px 20px;
      .form-content {
        overflow-y: scroll;                // Chrome    <<  removes scrollbar
        overflow-x: hidden;                // Chrome    <<  removes scrollbar
        -ms-overflow-style: none;          // IE 10+    <<  removes scrollbar
        overflow: -moz-hidden-scrollable;  // Firefox   <<  removes scrollbar
        height: 48vh;
        margin: 10px 0px;
        padding: 0 15px;
        @media (min-width: $screen-sm) {
          height: 325px;
          padding: 0 10px;
        }
        .form-content::-webkit-scrollbar {
          width: 0px;
        }

3

vin_Bin87 8 Мар 2018 в 21:44

3 ответа

Лучший ответ

Все, что вам нужно сделать для браузеров с поддержкой webkit, это

::-webkit-scrollbar { display:none }

Я не верю, что в Firefox есть чистый способ CSS сделать это, так как в настоящее время он не поддерживает настройку полосы прокрутки. см. связанный с ним способ сделать это с отступом, который может быть вашим единственным вариантом: -to-scroll? rq = 1 «> Скрыть полосу прокрутки, но при этом можно прокручивать .

3

Julian Tennyson 8 Мар 2018 в 19:10

Я знаю, что вы сказали, что не хотите возиться с отступами или полями, но я чувствовал то же самое, я попробовал все, и для моего решения лучше всего было показывать вертикальную полосу прокрутки, а затем добавлять отрицательный отступ, чтобы скрыть его.

Это работало для IE11, FF60.9 и Chrome 80

body {
  -ms-overflow-style: none; /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px;
}

0

John Carroll 19 Мар 2020 в 16:42

Это будет несколько работать

-ms-overflow-style: -ms-autohiding-scrollbar;

Но не скрывает, когда пользователь прокручивает. Лучшим способом было бы поместить ваш контент в родительский div, где переполнение скрыто, но разрешить прокрутку внутри вашего дочернего div.

0

awtrimpe 26 Фев 2019 в 20:12

Свойство overflow — обработка вылезающего содержимого

Свойство overflow указывает браузеру, как поступать с содержимым (текст, картинки, другие блоки), которое вылазит за границы блока (за его ширину или высоту). Браузер может скрыть вылезающую часть, добавить полосы прокрутки или ничего не делать (оставить как есть — вылезшим за границы).

Синтаксис

селектор { overflow: hidden | scroll | auto | visible; }

Значения

Значение	Описание
hidden	Скрывает то содержимое, которое вылезло за границы блока.
scroll	Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto	Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет.
visible	Не скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible.

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow: visible; border: 1px solid red; width: 200px; }

:

Пример .

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; }

:

Пример . Значение hidden

Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow: hidden; width: 200px; height: 40px; border: 1px solid red; }

:

Пример . Значение scroll

При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow: scroll; width: 400px; height: 100px; border: 1px solid red; }

:

Пример . Значение auto

При значении auto полосы прокрутки добавляются только, если содержимое вылазит за контейнер. Сейчас их нет, так как все помещается:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow: auto; width: 400px; height: 100px; border: 1px solid red; }

:

Пример . Значение auto

А теперь ограничим ширину — появится горизонтальная полоса прокрутки:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { width: 200px; overflow: auto; height: 100px; border: 1px solid red; }

:

Смотрите также

• свойство word-break,
  переносящее буквы длинного слова на новую строку
• свойство overflow-wrap,
  переносящее буквы длинного слова на новую строку
• свойство overflow-x,
  которое обрезает вылезающие по горизонтали части
• свойство overflow-y,
  которое обрезает вылезающие по вертикали части

Как сделать красивую полосу для прокрутки на CSS

Скролл бар используется не только на веб страницах но и в отдельных формах, поэтому его форма и размер имеют большое значение. Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет. Самое простое решение данной проблемы — это стилизовать стандартный скролл средствами css3. Ограничение данного способа в том, что он работает только в браузерах использующих webkit

Вот пример HTML кода для работы:

<div></div>

CSS

.scroll-block {height: 70px;width: 340px;background: whitesmoke;overflow-y: scroll;border:1px solid;}
.scroll-block::-webkit-scrollbar-track {border-radius: 4px;}
.scroll-block::-webkit-scrollbar {width: 6px;}
.scroll-block::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;}
.scroll-block:hover::-webkit-scrollbar-thumb {background: #6a7d9b;}

Рассмотрим подробнее каждый элемент

::-webkit-scrollbar-track {border-radius: 4px;}  — Задает для трэка скругление краев в 4px, так же можно добавить фон
::-webkit-scrollbar {width: 6px;} — Ширина скролла 6px
::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;} — Задает цвет и радиус скругления в трэка
:hover::-webkit-scrollbar-thumb — При наведении на блок меняет цвет трэка.

Так же если нужно оформить скролл-бар для всего сайта, то в CSS необходимо убрать .scroll-block, и тогда параметры станут глобальными.

Будут вопросы, задавайте в комментариях. Отвечу

Summary

Article Name

Как сделать красивую полосу для прокрутки на CSS

Description

Скролл бар используется не только на веб страницах но и в отдельных формах, поэтому его форма и размер имеют большое значение. Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет.

Как убрать маркеры списка css?

Здравствуйте, дорогие друзья!

Рассмотрим как убрать маркеры списка в CSS, ведь такая необходимость возникает очень часто при работе как с маркированными так и с нумерованными списками.

Предположим у нас есть обычный список:

<ul> <li> Весна</li> <li> Лето</li> <li> Осень</li> <li> Зима</li> </ul>

По умолчанию он будет отображаться с вот такими маркерами в виде точек:

Если мы хотим убрать маркеры списка, то нам нужно для его элементов дописать CSS-свойство list-style:none; или list-style-type: none;

.my-list { list-style:none; }

Если наш список не имеет своего класса, но находится в каком то блоке, как здесь:

<div> <ul> <li> …</li> <li> …</li> </ul> </div>

То CSS код будет выглядеть так:

. block ul li { list-style:none; }

Аналогично мы можем убрать цифры в нумерованном списке, только вместо ul нужно указывать ol.

Это свойство позволит нам убрать маркер, но отступ слева останется.

Чтобы убрать этот отступ слева применим для тегов <li< CSS свойство margin-left:0px;

.my-list { margin-left:0px; }

margin-left:0px!important;

Если и это не поможет, то читаем внимательно статью «Почему не работают CSS-стили?»

Так же вы можете стилизовать маркированный список заменив стандартный маркер на другой или добавить своё изображение маркера. Подробнее о том как это сделать написано в этой статье: «Как сделать красивый маркированный список HTML?»

Надеюсь что эта статья поможет вам быстрее решить проблему с маркерами и у вас ещё останется время чтобы посмотреть вот это интересное видео про самые необычные здания:

Вот, вроде бы и всё! Если у вас возникнут какие то вопросы или трудности с тем как убрать маркер или вам есть что сказать – оставляете свои комментарии!

С уважением Юлия Гусарь

Hide Scrollbar CSS: Как скрыть полосу прокрутки из любого элемента HTML

Бывают случаи, когда нам нужно скрыть полосу прокрутки от элементов HTMl. Использование может варьироваться от человека к человеку. Это упрямая тема , чтобы сохранить полосу прокрутки или нет, на основе Взаимодействий с пользователем (UI) / Пользовательского опыта (UX) .

В большинстве случаев я не люблю показывать пользователю полосу прокрутки из-за моих дизайнерских приемов.

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

Давайте посмотрим на пользовательский интерфейс по умолчанию для элементов прокрутки, которые будут отображать полосу прокрутки.

Мы объявим div , который будет содержать список элементов, а затем применим некоторый CSS, чтобы обеспечить max-width и max-height , чтобы увидеть поведение прокрутки.

  

    

      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
      
 Некоторая ценность 
    
  
  

 . scroll-show ul {
  максимальная высота: 100 пикселей;
  максимальная ширина: 200 пикселей;
  перелив: авто;
  граница: 2px solid # f3f3f3;
  отступ слева: 16 пикселей;
}
  

Посмотрим, как это выглядит на экране

Видите ли, браузер автоматически добавляет полосу прокрутки по умолчанию, но если мы хотим скрыть, мы можем это сделать.

Теперь мы добавим элемент css, чтобы скрыть полосу прокрутки:

Мы объявим div с другим именем класса, которое будет содержать такое же количество элементов, а затем мы будем использовать тот же CSS, но с некоторыми дополнительными правилами, чтобы видеть поведение прокрутки, но не видеть полосу прокрутки.

  

  

    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
    
 Некоторая ценность 
  

  

 . scroll-hide ul {
  максимальная высота: 100 пикселей;
  максимальная ширина: 200 пикселей;
  граница: 2px solid # f3f3f3;
  отступ слева: 16 пикселей;
  перелив: авто;
  / * это скроет полосу прокрутки в браузерах на основе Mozilla * /
  переполнение: -moz-scrollbars-none;
  / * это скроет полосу прокрутки в Internet Explorer * /
  -ms-overflow-style: нет;
}

/ * это скроет полосу прокрутки в браузерах на основе webkit - safari, chrome и т. д. * /
.scroll-hide ul :: - webkit-scrollbar {
  ширина: 0! важно;
  дисплей: нет;
}
  

Посмотрим, добились ли мы того, чего хотели

Здесь вы можете видеть, что полоса прокрутки больше не видна, но функциональность прокрутки остается неизменной.

Надеюсь, это хоть как-то поможет. Прокомментируйте свои мысли по поводу всего, что вы хотели бы изменить или добавить.

Скрыть полосу прокрутки

На этой странице показано, как скрыть полосу прокрутки из элемента HTML.

Вы можете использовать код CSS для удаления полос прокрутки из любого элемента, на котором могут появляться полосы прокрутки. Эти элементы включают элемент div , элемент iframe , тег textarea и даже теги body или html (чтобы скрыть полосы прокрутки браузера).

Скрыть

Элемент textarea обычно используется для того, чтобы посетители вашего веб-сайта могли вводить текст (чтобы они могли оставлять отзывы, оставлять комментарии и т. Д.). По умолчанию элемент textarea поставляется с вертикальной полосой прокрутки (и, возможно, даже с горизонтальной полосой прокрутки). Эта вертикальная полоса прокрутки позволяет пользователю продолжать вводить и просматривать свой текст (путем прокрутки вверх и вниз).

Чтобы скрыть эту вертикальную полосу прокрутки (и горизонтальную полосу прокрутки, если она тоже появляется), вам необходимо использовать свойство переполнения CSS со значением , скрытым .

Пример:

Введите столько текста, сколько сможете ... пока не появится вертикальная полоса прокрутки. Продолжать!

Важно отметить, что, даже если полосы прокрутки скрыты, пользователь может вводить столько данных, сколько захочет.Скрытые полосы прокрутки просто не позволяют пользователю прокручивать страницу вниз, чтобы увидеть собственные комментарии.

Полосы прокрутки браузера - Скрыть

Тот же принцип можно использовать для удаления полос прокрутки браузера. Когда содержимое на странице занимает больше высоты браузера, любые полосы прокрутки, которые обычно появляются, будут скрыты. В этом примере к элементу html добавлено свойство overflow со значением , скрытым .

Пример:

Код:

Скрыть пример полосы прокрутки

Назад

  // Опции: видимый, скрытый, прокрутка, авто
div.disabled {
    переполнение-x: скрыто; // горизонтально
    переполнение-y: прокрутка; // вертикальный
}
  

  div.disabled {
    переполнение-x: скрыто; // горизонтально
    переполнение-y: прокрутка; // вертикальный
}
  

 
переполнение-x: видимое;
переполнение-x: скрыто;
переполнение-x: клип;
переполнение-x: прокрутка;
переполнение-x: авто;


переполнение-х: наследование;
переполнение-x: начальное;
переполнение-x: не установлено;
  

  видимые | скрытый | зажим | свиток | авто  

  

  
  overflow-x: hidden  - скрывает текст за пределами поля.
    

      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  

  
  overflow-x: scroll  - всегда добавляет полосу прокрутки
    

      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  

  
  overflow-x: visible  - при необходимости отображает текст за пределами поля.
    

      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  

  
  overflow-x: auto  - в большинстве браузеров эквивалентно  scroll . 
    

      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
    
  

  

  # div1, # div2, # div3, # div4 {
  граница: сплошной черный 1px;
  ширина: 250 пикселей;
  нижнее поле: 12 пикселей;
}

# div1 {overflow-x: hidden;}
# div2 {overflow-x: scroll;}
# div3 {overflow-x: visible;}
# div4 {overflow-x: auto;}
  

 импортировать {RemoveScroll} из «реагировать-удалить-прокрутить»;


  Только этот контент можно будет прокручивать
 

 импорт {sidecar} из «реагировать-удалить-прокрутить»;
импортировать {RemoveScroll} из 'response-remove-scroll / UI';

const sidecar = sidecar (() => import ('react-remove-scroll / sidecar'));


  При необходимости загрузит логику из коляски
 

 
  Только этот контент можно будет прокручивать
 

 
  
 // RemoveScroll добавит реквизиты в этот div
    Только этот контент можно будет прокручивать
  
 

 импортировать {RemoveScroll} из «реагировать-удалить-прокрутить»;

// сделать ширину: 100%


// сделать "правильно: 0"
 classNames.zeroRight)} /> 

    

  

  htm ">