在chrome中添加漸變以選擇框w/CSS3？

我嘗試在某些表單元素上呈現漸變背景。雖然它對文本和文本區域工作正常，但對於Chrome/Safari中的選擇似乎不起作用（儘管它可以在FF3上運行）。有沒有辦法做到這一點？在chrome中添加漸變以選擇框w/CSS3？

CSS代碼：

 .prettyform input, .prettyform textarea, .prettyform select { 
      padding: 9px; 
      border: 1px solid #E2E3E5; 
      outline: 0; 
      width: 400px; 
      box-shadow: rgba(0,0,0,0.1) 0px 0px 8px; 
      -moz-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px; 
      -webkit-box-shadow: rgba(0,0,0,0.1) 0px 0px 8px; 
      background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #E2E3E5), to(#FFFFFF)); 
      background: -moz-linear-gradient(top, #FFFFFF, #E2E3E5 1px, #FFFFFF 25px); 
     }

HTML標記：

<form class='prettyform'> 
     <p> 
     <label>Text Input</label> <br> 
     <input type='text' name='test1'> 
     </p> 
     <p> 
     <label>Select Input</label> <br> 
     <select name='test2'> 
      <option value='1'>Option 1</option> 
      <option value='2'>Option 2</option> 
      <option value='3'>Option 3</option> 
     </select> 
    </form>

Live Demo

我注意到的另一件事是，即使他們都設置爲寬度：400像素，選擇是明顯在Chrome瀏覽器中都較短。爲什麼是這樣？

來源

2010-09-30 GSto

奇怪。你的演示在我的chrome中顯示了一個漸變背景（但它也顯示了一個醜陋的邊框......）。在firefox 4中，你的選擇顯示爲帶有web dev工具欄的400px，你的輸入是418px（因爲它從兩邊獲得了9px的填充）。 – Shikiryu 2010-09-30 15:29:58

我不完全確定你是否可以在任何瀏覽器中選擇那麼多樣式。他們一直對css感到痛苦。

即ie中，選項不會擴展到文本的寬度，在Firefox中，它們由於下拉圖標等而變短。它只是一個使用css的痛苦。如果你必須有一個樣式化的選擇框，你可以看看jQuery UI，因爲我相信他們有一些可選擇的樣式框

來源

2010-09-30 15:17:20 Ascherer

實際上，你可以在Chrome中使用背景圖像，例如http://s3.amazonaws.com/37assets/svn/480-custom_forms.html。到目前爲止，我遇到的最大問題是找到一個也適用於Firefox的版本，但如果這不是您的要求，請務必檢查該網站並使用背景圖像方法。

來源

2012-02-09 22:16:15 OverclockedTim

檢查我的示例，看看如何爲chrome上的select設置漸變背景。

http://jsfiddle.net/thirtydot/DCjYA/361/

來源

2012-02-16 14:23:46 mcmwhfy

爲了記錄在案，mcmwhfy的回答以上操作不解決純CSS的問題，但在Chrome選擇唯一的解決辦法。

以下將盡可能在每個瀏覽器中設置input/textarea/select的樣式，但Chrome中的SELECT除外。但不幸的是，圖片是目前在Chrome中執行此操作的唯一方法。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f8ff', endColorstr='#ffffff',GradientType=0); /* IE8/9 */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F4F8FF 100%); /* IE10+ */ 
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(102,204,255,0.75), rgba(0,0,0,0)); 
background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(4%, #f4f8ff), to(#FFFFFF)); 
background: -moz-linear-gradient(top, #FFFFFF, #f4f8ff 1px, #FFFFFF 25px);

來源

2013-06-21 14:11:21 BuddyZ

在chrome中添加漸變以選擇框w/CSS3？

回答

相關問題