textarea с горизонтальным правилом

19

Кто-нибудь знает способ создания горизонтальных правил внутри <textarea> без использования фонового изображения?

CSS3 будет в порядке. Я могу прикрепить резерв изображения для IE, если это необходимо.

Пример:

    
задан Turnip 27.02.2012 в 17:06
источник

2 ответа

44

Вы можете сделать это с помощью линейных градиентов:

.notes {
    background-attachment: local;
    background-image:
        linear-gradient(to right, white 10px, transparent 10px),
        linear-gradient(to left, white 10px, transparent 10px),
        repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px);
    line-height: 31px;
    padding: 8px 10px;
}
<textarea class="notes"></textarea>

версия JSFiddle

    
ответ дан Ry- 27.02.2012 в 17:29
источник
  • И у нас есть победитель! Спасибо minitech. Это никогда не приходило мне в голову. –  Turnip 27.02.2012 в 17:30
  • Очень красиво сделано. –  j08691 27.02.2012 в 17:32
  • @ 3rror404: Также отредактирован, чтобы добавить отступы из вашего изображения. Уф! Это много градиентов ... –  Ry-♦ 27.02.2012 в 17:35
  • Я впечатлен! Спасибо, что нашли время для его работы. Очень признателен. –  Turnip 27.02.2012 в 17:38
  • @undroid: background-position изменит их положение, и чтобы изменить размер, вам нужно будет изменить все 30px и 31px в зависимости от того, какой размер вам нужен, и что плюс 1px. –  Ry-♦ 22.04.2015 в 16:43
Показать остальные комментарии
0

Я думаю, что использование изображения - правильное решение.

Резерв: прозрачный фон на текстовом поле, фоновое изображение на обертке DIV.

    
ответ дан Diodeus - James MacFarlane 27.02.2012 в 17:18
источник