変更ボタンの背景色を

Question

私は、ユーザーがジャンゴに画像をアップロードできるようにするために、私のいずれかの形式で、次のフィールドがあります。

image = models.ImageField(upload_to=upload_location, null=True, blank=True) 

私は自分のフォームのフィールドとして表示表は次のよう：

<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %} 
    <div style="overflow-x:auto;"> 
     <table class="table-form" style='table-layout:fixed;'> 
      <tr> 
       <th>Image</th> 
       <td>{{ form.image }}</td> 
      </tr> 
      ... 

そして、ここでは、私はChromeデベロッパーツールで要素を検査する際、画像フィールドのHTMLは次のようになります。

<input id="id_image" name="image" type="file"> 

ボタンの背景色を変更しようとしていますが、「No File Chosen」のサイズはボタンのテキストよりも小さくなっています。

#id_image { 
background-color: orange; 
} 

が

は、どのように私は別に、その隣のボタンやテキストにCSSを割り当ててください：

現在、私は私のCSSに以下のものを一度に両方を変更することができます？助けて！ありがとう

Answer 1

labelを追加し、JavaScriptでファイル名を取得することができます。

あなたのラベルのCSSを変更してください。

これはあなたを助ける：

JSFiddle Example