特定寬度的可編輯文本區域的背景顏色

首先，我正在嘗試做什麼：
Gmail正在包裝純文本電子郵件（我不想評論RFC的東西），我想知道包裝將要發生的位置。特定寬度的可編輯文本區域的背景顏色

因此，我打算添加一些自定義CSS規則，將78個字符限制下的背景顏色更改爲淺灰色，並切換爲等寬字體。

壞消息是，我知道幾乎一無所知HTML或CSS，但我通過創建一個gmail.css這樣做在Opera的一些基本的東西（和優秀的FreeBSD的工具，我剛剛發現），但是成功：

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

並用Edit site preference...激活它。所以66％的工作完成了（但從困難的角度來看只有2％）。

然後，我搜索瞭如何設置這個寬度，但找不到任何工作解決方案。通常，答案建議創建一個新的元素，但這不是我想要做的：textarea應該和窗口一樣寬，而這只是背後的顏色應該給出限制的指示。

請注意，我不能編輯任何比CSS（或者我需要知道如何去做！）。

這裏是我想修改的元素蜻蜓採取的一個片段：

<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>

來源

2013-07-02 calandoa

所以你只希望可編輯區域的左邊部分是灰色的？我認爲最簡單的方法是創建一個高1像素的圖像，並將其用作需要的寬度，並將其用於背景，使用url（'image'）repeat-y' –

因爲我跟我好，我會回答我的問題...我發現最簡單的解決方法是使用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; 
}

來源

2013-07-02 18:19:17 calandoa

特定寬度的可編輯文本區域的背景顏色

回答

相關問題