下拉框样式修改 - 我的帆软

下拉框样式修改

想做到图二的效果,目前只能修改背景色,但是中间那个倒立的三角形怎么改变颜色呢?还有如何让其变成圆角?

.fr-trigger-center好像包含的三角形

孜云 发布于 2020-5-20 16:54 （编辑于 2020-5-20 17:05）

1min目标场景问卷

立即参与

回答问题关注问题

悬赏：4 F币 + 添加悬赏

提示：增加悬赏、完善问题、追问等操作，可使您的问题被置顶，并向所有关注者发送通知

共5回答

最佳回答

shirokoLv6资深互助
发布于2020-5-20 17:00

用外部引用css样式的话都能改

https://bbs.fanruan.com/wenda/question/30467.html

https://help.finereport.com/doc-view-2287.html

你要改的那个三角形大概是这个选择器吧： .fr-trigger-center

改background的图片就好

举报收起评论(2)

孜云(提问者) 那个三角形是图片嘛?不太懂JS...好像三角形是 .fr-trigger-center中的一部分, .fr-trigger-center是中间一条

2020-05-20 17:04

shiroko 回复孜云(提问者) 就是那个小三角，整个图标就是小三角+蓝色背景。你可以试试$(\".fr-trigger-center\").css(\'background\',\'transparent\')，会发现小三角没了

2020-05-20 20:01

jongwangLv6中级互助
发布于2020-8-22 10:25（编辑于 2020-8-22 11:17）

修改下回答

-----------------------

下拉框样式.cpt

down_new.png

需要先将图片先放在这个路径，其中pic自己建一下，或者放到其他位置也可以，url那里指向正确即可。

效果：

样式修改代码，仅供参考，放入到下拉框初始化事件中：

setTimeout(function() {
	$(".fr-trigger-btn-up").css({
		"border-radius": "0 4px 4px 0",
		"background": "white",
		"border": "1px solid #e8ebf1",
		"border-left-style": "none"
	})

	$(".fr-trigger-text.fr-border-box").css({
		"border-radius": "4px 0 0 4px",
		"border": "1px solid #e8ebf1"
	})

	$(".fr-trigger-center").css({
		"border-radius": "4px 0 0 4px",
		"background": "url('../../pic/down_new.png')  50%/80% no-repeat"
	})
}, 10)

图片你回头自己换下，然后对于background属性改一改，改到合适就好了。