表CSS與瓶

使用瓶框架和庫WTforms和從來就改變選擇字段的每個選項的顏色有問題，因爲它黑色而不是紅色

I'總是出現

I'm已經在模板下表單

<form method=post class="formulario" action="/rutinas"> 
      <dl> 
      <div class="form-group"> 
       {{ render_field(form.username) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.email) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.sex) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.age) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.type_training) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.days) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.duration) }} 
      </div> 
      <div class="form-group"> 
       {{ render_field(form.intensity) }} 
      </div> 
      </dl> 
      <p><input type=submit class="btn btn-sm btn-default" value=Make></p> 
    </form>

而且在CSS文件：

input 
    { 
     color: black; 
    } 

select option 
    { 
     color: red; 
    }

來源

2015-12-11 Santiago de Diego

我忘了說輸入字段完美工作 –

使用瀏覽器檢查元素。您應該能夠看到Flask生成的字段和類（更新選擇器）以及計算的樣式是什麼（以確定您想要覆蓋的內容）。 –

我很抱歉，但我不明白，它出現了一個有3個選項的選擇字段，每個選項都有不同的值。 –

您可以避免將表單元素封裝在div中以簡化CSS選擇。這意味着：

<dl> 
    <div class="form-group"> 
     {{ render_field(form.username) }} 
    </div>

將變成：

{{form.username(class='css_class'}}

周圍沒有進一步的div。 Wima負責將該特定字段呈現爲html中的輸入字段，Jinja負責應用您在括號中表達的類。

在WTForms crash course

來源

2015-12-11 18:42:43 ciacicode

從來就有用的信息解決了這個問題，從來就寫在CSS 爲：

select { 
    color: black; 
    border: none; 
    -webkit-appearance: cover; 
}

最後它的工作原理，如果我有最後一行，我想it'因爲我也使用Bootstrap框架。感謝您的回答。

來源

2015-12-11 19:05:59

回答

相關問題