[問題] 如何更改jQuery UI的CSS樣式呢?

看板Web_Design作者 (我行我素 我型我塑)時間9年前 (2016/08/24 19:14), 編輯推噓6(6022)
留言28則, 7人參與, 最新討論串1/2 (看更多)
jQuery新手提問, 我想要更改這個例子的CSS樣式, http://www.runoob.com/try/try.php?filename=jqueryui-example-progressbar 請問如何更改: 1.進度條總寬度 2.進度條總高度 3.進度條外框顏色 4.進度條內bar的顏色 5.進度條內背景顏色 6.外框圓角大小 看前面的說明有點花,不知道如何更改...... 請版上指導我方向,感激不盡..... -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.171.65.220 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1472037283.A.EA9.html

08/24 19:42, , 1F
他的樣式都放在 jquery-ui.min.css
08/24 19:42, 1F

08/24 19:42, , 2F
通常會附上沒有 .min.css 的原始檔案 比較容易改
08/24 19:42, 2F

08/24 21:55, , 3F
感謝回應 但我還是不清楚該怎麼做 我目前只會用純CSS設
08/24 21:55, 3F

08/24 21:56, , 4F
定各個div樣式...
08/24 21:56, 4F

08/24 23:22, , 5F
用chrome開發者工具找出樣式定義的地方再override掉
08/24 23:22, 5F

08/24 23:45, , 6F
有在chrome開發者工具Element看到樣式了,那我的下一步
08/24 23:45, 6F

08/24 23:45, , 7F
該怎麼做呢? 不好意思....
08/24 23:45, 7F

08/25 03:49, , 8F
開發者工具無法儲存 只看暫時看(有錯請指正)
08/25 03:49, 8F

08/25 03:49, , 9F
所以根本的還是要用 jquery-ui.css 的檔案
08/25 03:49, 9F

08/25 10:22, , 10F
通常不會直接改library的css吧,自己寫個css檔把要override
08/25 10:22, 10F

08/25 10:24, , 11F
的樣式寫在裡面就好
08/25 10:24, 11F

08/25 10:56, , 12F
1.width 2.height 3.border-color 4.5.圖 6.radius
08/25 10:56, 12F

08/25 10:57, , 13F
基本上就是自己寫一個css蓋過去就可以了
08/25 10:57, 13F

08/25 10:57, , 14F
改library也可以 只是建議換個檔名 以免搞混
08/25 10:57, 14F

08/25 11:39, , 15F
目前根據樓上各位大大解釋後,找到的解決方法是:用開發者
08/25 11:39, 15F

08/25 11:40, , 16F
工具找到CSS樣式,複製下來後,貼到html內做CSS調整,請
08/25 11:40, 16F

08/25 11:41, , 17F
問這樣是正確的做法嗎? 看起來是有改樣式,但不曉得這樣
08/25 11:41, 17F

08/25 11:42, , 18F
是不是理想的做法
08/25 11:42, 18F

08/25 12:25, , 19F
這樣也可以。更好的作法是把樣式貼到一個新開的css檔裡
08/25 12:25, 19F

08/25 13:22, , 20F
你在抓jquery ui時其實可以選擇自訂樣式
08/25 13:22, 20F

08/25 13:38, , 21F
新開css真的畫面比較乾淨~ 還有請問樓上有教學範例嗎?我
08/25 13:38, 21F

08/25 13:38, , 22F
可能需要範例才能入門......感謝
08/25 13:38, 22F

08/25 14:41, , 23F
http://jqueryui.com/themeroller/ 不用啥範例吧...
08/25 14:41, 23F

08/25 14:41, , 24F
點一點選一選下載 import 進去就可以用了啊
08/25 14:41, 24F

08/26 00:16, , 25F
樓上..其實我不曉得該怎麼做....(汗)....
08/26 00:16, 25F

08/26 21:55, , 26F
誒,你有點著玩左邊的選單試試嗎? 點成你喜歡的樣式
08/26 21:55, 26F

08/26 21:56, , 27F
然後下載,解壓縮, 把檔案放進你的project...
08/26 21:56, 27F

08/26 21:59, , 28F
再把你的 html 內的 reference 改成對應檔名就好
08/26 21:59, 28F
文章代碼(AID): #1NlO6Zwf (Web_Design)
文章代碼(AID): #1NlO6Zwf (Web_Design)