Войти
×
Меню :


Blog (1961)
other (413)
php (390)
js (301)
html (153)
php book (148)
css (147)
пк (124)
html tags (63)
js tag (56)
windows (48)
js method (44)
jquery (43)
php array (39)
Показать еще :
ruweb.net (37)
text (37)
js date (33)
form html (30)
online (29)
link (26)
fonts (24)
dosite (22)
js events (22)
php file (21)
foto (20)
atom (20)
input (19)
database (19)
forum (18)
lingvo (18)
svg (18)
mysql (17)
php date (17)
hosting (17)
php img (16)
фото (16)
php time (15)
img (15)
color (15)
info (15)
android (15)
notepad (14)
js url (14)
js time (14)
jsphp (14)
xiaomi (14)
board (14)
yandex (13)
select (13)
знак (13)
table (13)
htaccess (13)
osclass (13)
download (12)
php path (12)
$ server (12)
html book (11)
icon (11)
keyboard (11)
vs code (11)
dw block (10)
mouse (10)
form (10)
paint (10)
ось (10)
js delete (10)
css img (10)
iframe (9)
ftp (9)
hover (8)
php url (7)
cookie (7)
comment (6)
hey tag (6)
click (6)
search (6)
list (6)
canvas (6)
нок (6)
js vars (6)
php get (6)
ok (6)
reg.ru (5)
js id (5)
js math (5)
console (5)
year (5)
heading (5)
value (5)
web (5)
tag a (5)
mb (5)
xml (5)
js file (5)
scandir (4)
day (4)
month (4)
symbols (4)
adminka (4)
js book (4)
folder (4)
task (4)
bbcode (4)
base64 (4)
word (4)
week (4)
youtube (4)
submit (4)
pages (4)
numbers (4)
php var (4)
news (4)
ucoz (4)
js img (4)
js hash (4)
ssl (4)
vk (4)
js form (4)
games (4)
2022 (4)
куб (3)
domen (3)
captcha (3)
https (3)
404 (3)
aimp (3)
video (3)
php day (3)
рся (3)
padding (3)
file (3)
js post (3)
line (3)
units (3)
arrows (2)
tag hr (2)
qr code (2)
sitemap (2)
typeof (2)
counter (2)
details (2)
seo (2)
prompt (2)
height (2)
blob (2)
src (2)
akaso (2)
google (2)
kfc (2)
atom 11 (1)
php 33 (1)
atom 15 (1)
atom 14 (1)
atom 16 (1)
atom 13 (1)
atom 12 (1)
втб (1)
php 27 (1)
php 26 (1)
php 28 (1)
php 32 (1)
php 31 (1)
atom 8 (1)
js 5 (1)
atom 9 (1)
atom 1 (1)
atom 7 (1)
atom 5 (1)
atom 6 (1)
atom 3 (1)
atom 2 (1)
js 6 (1)
js 7 (1)
php 7 (1)
js 9 (1)
#html (1)
js 10 (1)
atom 4 (1)
js 8 (1)
js 4 (1)
php 25 (1)
atom 10 (1)
chart (1)
js 1 (1)
header (1)
php 9 (1)
replace (1)
php 40 (1)
php 3 (1)
php 41 (1)
opera (1)
php 38 (1)
php 34 (1)
php 18 (1)
php 17 (1)
js no4 (1)
php 10 (1)
atom 17 (1)
cursor (1)
php 8 (1)
php 22 (1)
php 23 (1)
php 20 (1)
php 19 (1)
php 30 (1)
php 4 (1)
php 24 (1)
ftp 1 (1)
scroll (1)
date (1)
php 11 (1)
php 35 (1)
speed (1)
php 16 (1)
php 14 (1)
name (1)
jino (1)
php 6 (1)
php 21 (1)
нод (1)
rutube (1)
php 12 (1)
php 37 (1)
php 2 (1)
font (1)
js 2 (1)
smile (1)
php (1)
js 3 (1)
php 13 (1)
php 43 (1)
archive (1)
aimp 1 (1)
php 5 (1)
aimp 3 (1)
aimp 2 (1)
php 44 (1)
php 45 (1)
atom 18 (1)
ftp 4 (1)
ftp 5 (1)
php 1 (1)
ftp 3 (1)
ftp 2 (1)
atom 20 (1)
atom 19 (1)
php 39 (1)
webp (1)
php 15 (1)
php 29 (1)
php 36 (1)
php 42 (1)

Убираем resize без none

Интересная задачка... убрать уголок у textarea, который показывается свойством "resize" без "none".

О resize, об уголке resize, как убрать?

  1. Что таоке уголок resize?
  2. Убираем уголок resize
  3. Как убрать треугольник resize
  1. Что таоке уголок resize?

    Возьмем поле textarea

    <textarea>Привет мир!</textarea>

    И выведем его прямо здесь:


    Как видим, что у данного "textarea" уголок растягивания присутствует...

    Что позволяет нм изменять размер поля в любые 2 стороны!

    Влево, вправо, вверх, вниз.

    Что таоке уголок resize?

    Если мы откроем исследовать элемент по нашему textarea, то увидим свойства по умолчанию, где видим, что по умолчанию стоит "resize: auto;" - что означает показывать уголок!

    Что таоке уголок resize?
  2. Убираем уголок resize

    Нам нужно изменить свойство "resize" по умолчанию на свое...

    "resize: auto;"

    Заменить значение "auto" - на "none"...

    resize: none;
    <textarea style="resize: none" id="dw_resize">Привет мир!</textarea>

    То получим, что наш треугольник resize пропал.


    Вне зависимости от "resize" у нас появляется полоса прокрутки! От которой избавимся в следующий раз!

  3. Как убрать треугольник resize

    Вообще - при помощи css можно "убрать треугольник resize" - только выше приведенным способом.

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

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

    Убрать треугольник resize с помощью "resize: auto;" (самый простой)

    И "убрать треугольник resize" - любым другим способом... (даже думать над этим не буду)

    И в первом и втором случае растягивать "textarea" с помощью треугольника не получится... ввиду его отсутствия... больше - этот треугольник ни на что не влияет...

    Может быть человек предполагал, что textarea будет растягиваться под напором текста, так это надо совсем другое...
    Пример ниже :

    Html код :

    <div class="example2">

    <textarea id="dw_resize">Привет мир!</textarea>

    </div>

    CSS :

    <style>

    .example2 textarea {

    resize: none;

    height: 50px;

    min-height: 50px;

    }

    </style>

    Javascript :
    Используем любой из способов...
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

1). Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

2). Помочь материально.

Теги:
textarea/
ruweb
См. интсрукция по ruweb. dwweb.ru есть здесь:
Все соцсети в одном месте!
defense_js Разное :Игра "пятнашки"
Угадай страну по флагу

Кальклятор
Математика онлайн

Списки шифрования
Часы

Числа словами
Названия чисел(max=10305)
Графики

Qr код онлайн

Как сделать сайт?
Md5 онлайн
Sitemap.html
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2025 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB Сайт работает круглосуточно 24/7.
Страница загружена за : 0.023465 секунд.