Цвет фона по определенной ширине редактируемого текстового поля

Question

Во-первых, что я пытаюсь сделать:
Gmail - это перенос текстовых сообщений (материал RFC, который я предпочитаю не комментировать), и я хочу знать, где будет происходить обертка ,

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

Плохая новость заключается в том, что я не знаю почти ничего о HTML или CSS, но мне это удалось, однако при этом некоторые базовые вещи с Opera (и выдающийся инструмент DragonFly я только обнаружил), создавая gmail.css вроде этого:

.editable { 
    background: #DDDDDD !important; 
    font-family:monospace !important; 
} 

и активировать его Edit site preference.... Таким образом, 66% работы выполнено (но 2% с точки зрения сложности).

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

Обратите внимание, что я не могу редактировать ничего, кроме CSS (или мне нужно знать, как это сделать!).

Вот отрывок взят с DragonFly элементов я пытаюсь изменить:

<table cellpadding="0" class="cf An" id=":il"> 
    <tbody> 
     <tr> 
      <td class="Aq"> </td> 
      <td class="Ap">ev 
       <div id=":in" class="Ar As aoE" style="display: none;"> 
        <div class="At"> 
         <textarea id=":ik" class="Ak aXjCH" style="" aria-label="Compose reply" spellcheck="true" itacorner="6,7:1,1,0,0" tabindex="1" form="nosend"/>ev 
        </div> 
       </div>  
       <div id=":im" class="Ar Au Ao" style="display: block;"> 
        <div id=":ir" class="Am Al editable LW-avf" hidefocus="true" aria-label="Compose reply" g_editable="true" role="textbox" contenteditable="true" style="direction: ltr; min-height: 85px;" tabindex="1">ev 
         <br/> 
         This is the editable content! 
        </div> 
       </div> 
      </td> 
      <td class="Aq"></td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

Потому что я хорошо со мной, я отвечу на свой вопрос ... Самое простое решение я нашел это использование linear-gradient. Я использовал под постоянным размером, поэтому, если вы попытаетесь на вашей стороне, вам может понадобиться немного настроить размер. Gmail обертывается после 76-го символа.

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

/* Works for Opera Linux 12.15 and Gmail July 2013 */ 

/* Left side, non-wrapped, stays white, right side is light grey. */ 
.editable { 
    /* Size is in px because the textarea can contains different fonts */ 
    background-image: linear-gradient(to right, #ffffff 612px, #eeeeee 1px) !important; 
    font-family:monospace !important; 
} 

/* Increase the size of new compose windows */ 
div[role=dialog] { 
    float: right !important; 
    width: 1000px !important; 
}