Как стилизовать textarea css

Textarea Tricks

Take your JavaScript to the next level at Frontend Masters.

Oh, <textarea> &#8216;s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.

1. Image as textarea background, disappears when text is entered.

You can add a background-image to a textarea like you can any other element. In this case, the image is a friendly reminder to be nice =). If you add a background image, for whatever reason, it can break the browser default styling of the textarea. The default 1px solid bolder is replaced with a thicker beveled border. To restore the browser default, you can just force the border back to normal.

That background image might interfere with the readability of the text once the text reaches that far. Here is some jQuery that will remove the background when the textarea is in focus, and put it back if the textarea is left without any text inside.

2. HTML5 placeholder text

There is a new attribute as part of HTML5 forms called placeholder. It shows faded gray text in the textarea (also works for text-style inputs) which disappears when the textarea is in focus or has any value.

HTML5 placeholder text works in Safari 5, Mobile Safari, Chrome 6, and the Firefox 4 alpha.

3. Placeholder text, HTML5 with jQuery fallback

We can easily test if a particular element supports a particular attribute by testing with JavaScript:

Then we can write code so that if the browser does support the placeholder attribute, we&#8217;ll use that, if not, we&#8217;ll mimic the behavior with jQuery:

4. Remove the blue glow

All WebKit browsers, Firefox 3.6, and Opera 10 all put a glowing blue border around textareas when they are in focus. You can remove it from the WebKit browsers like this:

You could apply it to the :focus style as well, but it works either way. I have not yet found a way to remove it from either Firefox or Opera, but -moz-outline-style was about as far as I tested.

REMINDER: The blue glow is becoming a strong standard and breaking that standard is typically a bad thing for your users. If you do it, you should have a darn compelling reason to as well as a similarly strong :focus style.

5. Remove resize handle

WebKit browsers attached a little UI element to the bottom right of text areas that users can use to click-and-drag to resize a textarea. If for whatever reason you want to remove that, CSS is all it takes:

6. Add resize handle

jQuery UI has a resizeable interaction that can be used on textareas. It works in all browsers and overrides the WebKit native version, because this version has all kinds of fancy stuff (like callbacks and animation).

To use it, load jQuery and jQuery UI on your page and at its most basic level you call it like this:

7. Auto-resize to fit content

James Padolsey has a super nice jQuery script for auto resizing textareas (That&#8217;s gone off and on the internet, so here&#8217;s a backup.)

Here&#8217;s another by Louis Lazeris, which also includes links to other options. It works just how you likely hope it does. The textarea starts out a normal reasonable size. As you type more and more content, the textarea expands to include all of that text, rather than triggering a scrollbar as is the default.

The plugin has a variety of options, but at its simplest you just load jQuery, the plugin file, and call it like this:

Another trick here is to not use a <textarea> at all, but <div contenteditable> . That will grow automatically with no fancy JavaScript help at all &#8211; except that it&#8217;s not a real form element anymore so you&#8217;ll need JavaScript to extract/send the value.

To prevent text from wrapping normally in CSS, you use #whatever . But for whatever reason, that doesn&#8217;t work with textareas. If you want to be able to type into textareas and would rather lines do not break until you press return/enter (a horizontal scrollbar is triggered instead), you&#8217;ll have to use the wrap="off" attribute.

9. Remove default scrollbars in Internet Explorer

IE puts a vertical scrollbar by default on all textareas. You can hide it with overflow: hidden, but then you don&#8217;t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.

jQuery Autocomplete — Как CSS стилизовать раскрывающееся меню TextArea?

Я использую TextArea в своем проекте вместе с автозаполнением jQuery.

У меня есть код javascript для обработки раскрывающегося списка с помощью автозаполнения jQuery. Я легко могу изменить стиль самого TextArea:

Однако я не могу понять, как стилизовать раскрывающееся меню в CSS. Мне нужно иметь возможность изменять фон раскрывающегося списка, а также цвет текста и фона выбранного элемента.

Для иллюстрации я имею в виду следующее:

enter image description here

2 ответа

Щелчок правой кнопкой мыши по раскрывающемуся элементу и выбор «проверить элемент» (в firefox) помог мне найти его:

Как стилизовать ввод и отправить кнопку с помощью CSS?

Я учу CSS. Как стилизовать ввод и отправить кнопку с помощью CSS?

Я пытаюсь создать что-то вроде этого, но я понятия не имею, как это сделать

введите описание изображения здесь

Вот отправная точка


Просто создайте стиль кнопки «Отправить» так же, как любой другой элемент HTML. Вы можете настроить таргетинг на различные типы элементов ввода с помощью селектора атрибутов CSS.

В качестве примера вы могли бы написать

Объединить с другими селекторами

Я бы предложил вместо использования

Кнопка была представлена ​​специально с учетом стиля CSS. Теперь вы можете добавить градиентное фоновое изображение или стилизовать его с помощью CSS3-градиентов.

Подробнее о структуре форм HTML5 здесь

Для надежности я бы предложил присвоить имена классов или id s элементам стиля (в идеале a class для ввода текста, так как предположительно их будет несколько) и id кнопку submit (хотя a также class будет работать):

Для более современных браузеров вы можете выбирать по атрибутам (используя тот же HTML):

Вы также можете просто использовать одноуровневые комбинаторы (поскольку ввод текста в стиле, кажется, всегда следует за label элементом, а за отправкой следует текстовая область (но это довольно хрупко)):

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *