[ plurk css ] 表單與圖示 - 細節變化出設計感 @ 金羽銀華

在最近幾個版型中，嘗試了一些新的CSS項目，像是表單欄位以及小圖示的變化，
在整體噗版的樣式設計上，使用與色系風格相合搭的選單配色和圖示，將能讓噗版
呈現出更協調的設計感，語言選單、搜尋選項，還有發噗區及回覆區的小圖示，讓我們一一來試著應用看看吧 ^^

[ 語言選單 ]

有出現語言選單的地方，一個在頁尾，一個在私密語系選項中，CSS項目分別如下：

1. 頁尾

#languge_selector /*語言選單*/

#languge_selector form select /*尚未展開時的下拉表格欄位*/

#languge_selector form select option /*展開後的表格*/

2. 私密語系選項

#more_options .caption select /*語言選單表格*/

可以用框線(border:)、底色(background-color:)、文字顏色(color:)和圓角設定，來呈現出不同的風貌：

[ 搜尋區域與時間選擇 ]

在搜尋標籤頁面中，可以選時段與國家區域來搜尋的欄位：

.hot_search_selector /*搜尋趨勢下拉選單*/

#trend_country /*國家*/

#trend_interval /*時段*/

以不同顏色區隔出選單項目，或是加上透明度，就能有不一樣的感覺～

寫法舉例：

/*搜尋趨勢下拉選單*/
.hot_search_selector
{
filter:alpha(opacity=70);opacity:0.7;zoom:1; /*透明度*/

}
#trend_country   /*國家*/
{
background:#ccc !important;
color:#222 !important;
filter:alpha(opacity=70);opacity:0.7;zoom:1;   /*透明度*/
}
#trend_interval /*時段*/
{
background:#222 !important;
color:#ddd !important;
filter:alpha(opacity=70);opacity:0.7;zoom:1;   /*透明度*/
}

除了表單可以下工夫，也可以試著將噗浪預設的圖示替換成自己喜愛的圖樣。

像浪上的噗中，標示回覆與刪除功能的小圖，還有單噗另開視窗的連結圖，發揮巧思，
換個可愛圖片，就能讓每日的回噗樂趣增添不少喔～

1. 回應時間標示列 - 回覆與刪除回應圖示

.reply_to /*回應這個人*/

.reply_to:hover /*滑鼠移至效果*/

.del_icon /*刪除這則回應*/

.del_icon:hover /*滑鼠移至效果*/

原本的圖示長這樣 . . .