html如何做选择颜色的下拉框？ yancey 2002-01-06 12:23:39 每项就是一种颜色的那种，一时找不到，只能来问啦，谢谢 ...全文 1734 5 打赏 收藏 html如何做选择颜色的<select>下拉框？ 每项就是一种颜色的那种，一时找不到，只能来问啦，谢谢 复制链接 扫一扫 分享 转发到动态 举报 写回复 配置赞助广告取 消 确 定 用AI写文章 5 条回复 切换为时间正序 请发表友善的回复… 发表回复 打赏红包 需支付: 0.00 元 取 消 确 定 yancey 2002-01-06 打赏举报 回复 我会了，谁来就送分 <select> <option style="background:#FF0000"> </option> </select> jww330 2002-01-06 打赏举报 回复 楼上的已经讲得很详细了，不用我多说了。好好努力呀。 bihu 2002-01-06 打赏举报 回复 <select name="color" size="1"> <option value="White" style="color:white;">White</option> <option value="Black" style="color:black;">Black</option> <option value="Red" style="color:red;">Red</option> <option value="Yellow" style="color:yellow;">Yellow</option> <option value="Pink" style="color:pink;">Pink</option> <option value="Green" style="color:green;">Green</option> <option value="Orange" style="color:orange;">Orange</option> <option value="Purple" style="color:purple;">Purple</option> <option value="Blue" style="color:blue;">Blue</option> <option value="Beige" style="color:beige;">Beige</option> <option value="Brown" style="color:brown;">Brown</option> <option value="Teal" style="color:teal;">Teal</option> <option value="Navy" style="color:navy;">Navy</option> <option value="Maroon" style="color:maroon;">Maroon</option> <option value="LimeGreen" style="color:limegreen;">LimeGreen</option></select> michael_chao 2002-01-06 打赏举报 回复 @#$%^&*( 孟子E章 2002-01-06 打赏举报 回复 ：） 有点像select下拉框的Button旋转按钮动画.rar 有点像select下拉框的Button旋转按钮动画，响应鼠标生成动画效果，当鼠标悬停于按钮时，按钮的上下边线翻转。 按钮的颜色可以自定义，按钮中的箭头符号是调用字体生成，因此不要删除fonts文件夹下的文件。 只用CSS美化选择框的实现代码 下面是一个默认样式的下拉框的长相： Here is the first option The second option HTML code： 复制代码代码如下: <select> Here is the first option The second option </select> 一个选择框的某些部分我们是可以美化的，比如字体、边框、颜色、内边距和背景颜色： Here is the first option The second option 但是烦人的下拉箭头还是保持不变。没有直接美化它的方式，但解决方案还是非 jQuery Select下拉列表外观自定义插件.rar jQuery Stylish Select 是一款jQuery Select下拉列表外观自定义插件,把Select下拉框美化成圆角的样式,另外颜色也不一样了,下拉列表中每个item的背景色也添加了.本Select美化用到了jquery了，在最新的jquery版本下未测试，有时候新版不兼容老版，引入时请注意。用法请下载源码包中的HTML示例文件。 ＜select＞＜/select＞下拉框 禁用 第一种 下拉框 变成灰色 style=“pointer-events: none;” 1. <select name="yijiShenhe" class="form-control m-b" style="pointer-events: none;"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"> 表格标签＜table＞＜/table＞、表单标签 ＜form＞＜/form＞、CSS样式的使用与总结 一.表格标签<table></table> 1.重点总结 <table> <tr> 表示行 <td></td> 表示列 </tr> </table> border 边框 aligen 位置 width 宽度，table统一设置表格总 宽度，或者在td里单独设置单元格宽度，并影响同一列。 bgcolor 背景色 colspan 在td中使用，表示可合并 其他 10,608 社区成员 29,047 社区内容 发帖 与我相关 我的任务 其他 Web 开发 其他 复制链接 扫一扫 分享 确定 社区描述 Web 开发 其他 社区管理员 加入社区 获取链接或二维码 近7日 近30日 至今 加载中 查看更多榜单 社区公告 暂无公告 试试用AI创作助手写篇文章吧 + 用AI写文章 window.__INITIAL_STATE__= {"csrf":"YerznuZx-nCkYdnKmob5-XoYXHcBm59abhMo","origin":"http:\u002F\u002Fbbs.csdn.net","isMobile":false,"cookie":"uuid_tt_dd=10_2219524550-1715511255935-659237; csrfToken=NsF2W5q4k674_p1Fc4vse0qC; uuid_tt_dd=10_2219524550-1715511255935-659237; dc_session_id=10_1715511255935.418718; dc_sid=5062821e44795b5cb01bd8cf7566be48","ip":"13.58.185.199","pageData":{"page":{"pageId":143,"title":"社区详情","keywords":"社区详情","description":"社区详情","ext":{"isMd":"true","armsfe1":"{pid:\"dyiaei5ihw@1a348e4d05c2c78\",appType:\"web\",imgUrl:\"https:\u002F\u002Farms-retcode.aliyuncs.com\u002Fr.png?\",sendResource:true,enableLinkTrace:true,behavior:true}","redPacketCfg":"{\"presetTitle\":[\"成就一亿技术人!\",\"大吉大利\",\"节日快乐\",\"Bug Free\",\"Hello World\",\"Be Greater Than Average!!\"],\"defaultTitle\":\"成就一亿技术人!\",\"preOpenSty\":{},\"redCardSty\":{}}","blogStar":"[{\"year\":\"2021\",\"enable\":true,\"communityIds\":[3859],\"url\":\"https:\u002F\u002Fbbs.csdn.net\u002Fsummary2021\"},{\"year\":\"2022\",\"enable\":true,\"communityIds\":[3860],\"url\":\"https:\u002F\u002Fbbs.csdn.net\u002Fsummary2022\"}]","mdVersion":"https:\u002F\u002Fcsdnimg.cn\u002Frelease\u002Fmarkdown-editor\u002F1.1.0\u002Fmarkdown-editor.js","componentSortCfg":"{ \"right\":[\"ratesInfo\",\"cty-profile\",\"pub-comp\",\"user-right-introduce\",\"post-event\",\"my-mission\",\"user-recommend\",\"user-right-rank\",\"user-right-rule\",\"user-right-adimg\"] }","show_1024":"{\"enable\":false,\"useWhitelist\":false,\"whitelist\":[76215],\"home\":\"https:\u002F\u002F1111.csdn.net\u002F\",\"logo\":\"https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221104102741.png\",\"hideLive\":true}","iframes":"[\"3859\"]","pageCfg":"{\"disableDownloadPDF\": false,\"hideSponsor\":false}"}},"template":{"templateId":71,"templateComponentName":"ccloud-detail","title":"ccloud-detail","floorList":[{"floorId":562,"floorComponentName":"floor-user-content","title":"社区详情页","description":"社区详情页","indexOrder":3,"componentList":[{"componentName":"baseInfo","componentDataId":"cloud-detail1","componentConfigData":{},"relationType":3},{"componentName":"user-right-introduce","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-recommend","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-rank","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-rule","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"user-right-adimg","componentDataId":"","componentConfigData":{},"relationType":2},{"componentName":"default2014LiveRoom","componentDataId":"20221024DefaultLiveRoom","componentConfigData":{},"relationType":3}]}]},"data":{"baseInfo":{"customDomain":"","uriName":"WebDevelop_Other","communityHomePage":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FWebDevelop_Other","owner":{"userName":"community_116","nickName":"其他","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","position":"","companyName":""},"user":{"userRole":3,"userName":null,"nickName":null,"avatarUrl":null,"rank":null,"follow":2,"communityBase":null,"joinCollege":null,"isVIP":null},"community":{"name":"其他","description":"Web 开发 其他","avatarUrl":"https:\u002F\u002Fg.csdnimg.cn\u002Fstatic\u002Fuser-img\u002Fdefault-user.png","qrCode":"","createTime":"2007-09-28","communityAvatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","communityNotice":null,"userCount":10608,"contentCount":29047,"followersCount":2760,"communityRule":"","communityId":233,"bgImage":"","hashId":"y3w01onz","domain":"","uriName":"WebDevelop_Other","externalDisplay":1,"adBanner":{"img":"","url":"","adType":0,"adCon":null},"rightBanner":{"img":"","url":"","adType":0,"adCon":null},"tagId":null,"tagName":null,"communityType":1,"communityApplyUrl":"https:\u002F\u002Fmarketing.csdn.net\u002Fquestions\u002FQ2106040308026533763","joinType":0,"visibleType":0,"collapse":0,"topicMoveAble":0,"allowActions":{},"communityOwner":"community_116","tagNameInfo":{"provinceTag":null,"areaTag":null,"technologyTags":null,"customTags":null}},"tabList":[{"tabId":1392,"tabName":"全部","tabUrl":"","tabSwitch":1,"tabType":4,"tabContribute":0,"cardType":0,"indexOrder":-1,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FWebDevelop_Other?typeId=1392","iframe":false,"sortType":1},{"tabId":1632214,"tabName":"Ada助手","tabUrl":"","tabSwitch":1,"tabType":2,"tabContribute":0,"cardType":0,"indexOrder":20,"url":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FWebDevelop_Other?typeId=1632214","iframe":false,"sortType":1}],"dataResource":{"mediaType":"c_cloud","subResourceType":"8_c_cloud_long_text","showType":"long_text","tabId":0,"communityName":"其他","communityHomePageUrl":"https:\u002F\u002Fbbs.csdn.net\u002Fforums\u002FWebDevelop_Other","communityType":1,"content":{"id":"424921","contentId":424921,"cateId":0,"cateName":null,"url":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F424921","shareUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F424921","createTime":"2002-01-06 12:23:39","updateTime":"2021-05-28 10:45:30","resourceUsername":"yancey","best":0,"top":0,"text":null,"publishDate":"2002-01-06","lastReplyDate":"2002-01-06","type":"13","nickname":"yancey","avatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F043c8685e51947dca1599b2ed9fe51e0_yancey.jpg!1","username":"yancey","commentCount":5,"diggNum":0,"digg":false,"viewCount":1734,"hit":false,"resourceSource":6,"status":10,"taskStatus":null,"expired":false,"taskCate":0,"taskAward":0,"taskExpired":null,"checkRedPacket":null,"avgScore":0,"totalScore":0,"topicTitle":"html如何做选择颜色的\u003Cselect\u003E下拉框？","insertFirst":false,"likeInfo":null,"description":"每项就是一种颜色的那种，一时找不到，只能来问啦，谢谢","coverImg":"https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221110040243.png","content":"每项就是一种颜色的那种&#xff0c;一时找不到&#xff0c;只能来问啦&#xff0c;谢谢","mdContent":null,"pictures":null,"videoInfo":null,"linkInfo":null,"student":{"isCertification":false,"org":"","bala":""},"employee":{"isCertification":false,"org":"","bala":""},"userCertification":[],"dependId":"0","dependSubType":null,"videoUrl":null,"favoriteCount":0,"favoriteStatus":false,"taskType":null,"defaultScore":null,"syncAsk":false,"videoPlayLength":null},"communityUser":null,"allowPost":false,"submitHistory":[{"user":{"registerurl":"https:\u002F\u002Fg.csdnimg.cn\u002Fstatic\u002Fuser-reg-year\u002F1x\u002F23.png","avatarurl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F043c8685e51947dca1599b2ed9fe51e0_yancey.jpg!1","nickname":"yancey","selfdesc":"","createdate":"2000-12-20 08:54:00","days":"8545","years":"23","username":"yancey","school":null,"company":null,"job":null},"userName":"yancey","event":"创建了帖子","body":"2002-01-06 12:23","editId":null}],"resourceExt":{}},"contentReply":{"pageNo":1,"pageSize":20,"totalPages":1,"totalCount":5,"total":0,"list":[{"hit":null,"hitMsg":null,"content":"我会了&#xff0c;谁来就送分\u003Cbr \u002F\u003E\n&lt;select&gt;\u003Cbr \u002F\u003E\n&lt;option style&#61;&#34;background:#FF0000&#34;&gt; &lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n&lt;\u002Fselect&gt;","topicTitle":null,"description":"我会了，谁来就送分 \u003Cselect\u003E \u003Coption style=\"background:#FF0000\"\u003E \u003C\u002Foption\u003E \u003C\u002Fselect\u003E","id":3394376,"contentResourceId":424921,"bindContentResourceId":0,"communityId":233,"username":"yancey","userNickName":"yancey","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F043c8685e51947dca1599b2ed9fe51e0_yancey.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":0,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2002-01-06 12:41:01","updateTime":"2017-12-05 07:49:34","formatTime":"2002-01-06","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"楼上的已经讲得很详细了&#xff0c;不用我多说了。好好努力呀。","topicTitle":null,"description":"楼上的已经讲得很详细了，不用我多说了。好好努力呀。","id":3397050,"contentResourceId":424921,"bindContentResourceId":0,"communityId":233,"username":"jww330","userNickName":"jww330","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":0,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2002-01-06 12:34:59","updateTime":"2017-12-05 07:49:39","formatTime":"2002-01-06","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"&lt;select name&#61;&#34;color&#34; size&#61;&#34;1&#34;&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;White&#34; style&#61;&#34;color:white;&#34;&gt;White&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Black&#34; style&#61;&#34;color:black;&#34;&gt;Black&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Red&#34; style&#61;&#34;color:red;&#34;&gt;Red&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Yellow&#34; style&#61;&#34;color:yellow;&#34;&gt;Yellow&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Pink&#34; style&#61;&#34;color:pink;&#34;&gt;Pink&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Green&#34; style&#61;&#34;color:green;&#34;&gt;Green&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Orange&#34; style&#61;&#34;color:orange;&#34;&gt;Orange&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Purple&#34; style&#61;&#34;color:purple;&#34;&gt;Purple&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Blue&#34; style&#61;&#34;color:blue;&#34;&gt;Blue&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Beige&#34; style&#61;&#34;color:beige;&#34;&gt;Beige&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Brown&#34; style&#61;&#34;color:brown;&#34;&gt;Brown&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Teal&#34; style&#61;&#34;color:teal;&#34;&gt;Teal&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Navy&#34; style&#61;&#34;color:navy;&#34;&gt;Navy&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;Maroon&#34; style&#61;&#34;color:maroon;&#34;&gt;Maroon&lt;\u002Foption&gt;\u003Cbr \u002F\u003E\n &lt;option value&#61;&#34;LimeGreen&#34; style&#61;&#34;color:limegreen;&#34;&gt;LimeGreen&lt;\u002Foption&gt;&lt;\u002Fselect&gt;","topicTitle":null,"description":"\u003Cselect name=\"color\" size=\"1\"\u003E \u003Coption value=\"White\" style=\"color:white;\"\u003EWhite\u003C\u002Foption\u003E \u003Coption value=\"Black\" style=\"color:black;\"\u003EBlack\u003C\u002Foption\u003E \u003Coption value=\"Red\" style=\"color:red;\"\u003ERed\u003C\u002Foption\u003E \u003Coption value=\"Yellow\" style=\"color:yellow;\"\u003EYellow","id":3395615,"contentResourceId":424921,"bindContentResourceId":0,"communityId":233,"username":"bihu","userNickName":"bihu","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F1cef9cff5eec4f9e8c7894adb4eaefcf_bihu.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":0,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2002-01-06 10:30:56","updateTime":"2017-12-05 07:49:36","formatTime":"2002-01-06","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"&#64;#$%^&amp;*(","topicTitle":null,"description":"@#$%^&*(","id":3395408,"contentResourceId":424921,"bindContentResourceId":0,"communityId":233,"username":"michael_chao","userNickName":"michael_chao","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":0,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2002-01-06 10:11:55","updateTime":"2017-12-05 07:49:30","formatTime":"2002-01-06","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null},{"hit":null,"hitMsg":null,"content":"&#xff1a;&#xff09;","topicTitle":null,"description":"：）","id":3394870,"contentResourceId":424921,"bindContentResourceId":0,"communityId":233,"username":"net_lover","userNickName":"孟子E章","userAvatar":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002F4fb917cacb784691b74acad4bdbc8914_net_lover.jpg!1","mdContent":null,"parentId":0,"replyName":"","replyNickName":"","bizNo":"bbs","ip":0,"status":10,"childCount":0,"topStatus":0,"recommendStatus":0,"userLike":false,"diggCount":0,"childIds":"","createTime":"2002-01-06 08:58:51","updateTime":"2017-12-05 07:49:32","formatTime":"2002-01-06","userRoleHonorary":{"userName":null,"roleId":null,"roleType":null,"roleStatus":null,"honoraryId":null,"roleName":null,"honoraryName":null,"communityNickname":null,"communitySignature":null},"child":null,"communityNickname":null,"communityReplyNickname":null,"rewardInfo":null,"checkRedPacketVO":null,"noDiggCount":null}],"maxPageSize":3000},"defaultActiveTab":1392,"recommends":[{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39841856\u002F11312882","title":"有点像select下\u003Cem\u003E拉\u003C\u002Fem\u003E框的Button旋转按钮动画.rar","desc":"有点像select下\u003Cem\u003E拉\u003C\u002Fem\u003E框的Button旋转按钮动画，响应鼠标生成动画效果，当鼠标悬停于按钮时，按钮的上下边线翻转。\r 按钮的\u003Cem\u003E颜色\u003C\u002Fem\u003E可以自定义，按钮中的箭头符号是调用字体生成，因此不要删除fonts文件夹下的文件。","createTime":"2019-07-10 11:05:02","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-11312882-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-11312882-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"1\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39841856\u002F11312882\",\"strategy\":\"2~default~OPENSEARCH~Paid\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-11312882-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"1\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39841856\u002F11312882\",\"strategy\":\"2~default~OPENSEARCH~Paid\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Paid-1-11312882-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_38621150\u002F13678127","title":"只用CSS美化\u003Cem\u003E选择\u003C\u002Fem\u003E框的实现代码","desc":"下面是一个默认样式的下\u003Cem\u003E拉\u003C\u002Fem\u003E框的长相： \nHere is the first option The second option \n\u003Cem\u003EHTML\u003C\u002Fem\u003E code： \n复制代码代码如下: &lt;select&gt; \u003Coption\u003EHere is the first option\u003C\u002Foption\u003E \u003Coption\u003EThe second option\u003C\u002Foption\u003E &lt;\u002Fselect&gt; \n一个\u003Cem\u003E选择\u003C\u002Fem\u003E框的某些部分我们是可以美化的，比如字体、边框、\u003Cem\u003E颜色\u003C\u002Fem\u003E、内边距和背景\u003Cem\u003E颜色\u003C\u002Fem\u003E： Here is the first option The second option 但是烦人的下\u003Cem\u003E拉\u003C\u002Fem\u003E箭头还是保持不变。没有直接美化它的方式，但解决方案还是非","createTime":"2020-12-13 17:50:24","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-13678127-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-13678127-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"2\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_38621150\u002F13678127\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-13678127-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"2\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_38621150\u002F13678127\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-2-13678127-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39840914\u002F11322342","title":"jQuery Select下\u003Cem\u003E拉\u003C\u002Fem\u003E列表外观自定义插件.rar","desc":"jQuery Stylish Select 是一款jQuery Select下\u003Cem\u003E拉\u003C\u002Fem\u003E列表外观自定义插件,把Select下\u003Cem\u003E拉\u003C\u002Fem\u003E框美化成圆角的样式,另外\u003Cem\u003E颜色\u003C\u002Fem\u003E也不一样了,下\u003Cem\u003E拉\u003C\u002Fem\u003E列表中每个item的背景色也添加了.本Select美化用到了jquery了，在最新的jquery版本下未测试，有时候新版不兼容老版，引入时请注意。用法请下载源码包中的\u003Cem\u003EHTML\u003C\u002Fem\u003E示例文件。","createTime":"2019-07-10 19:35:49","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-11322342-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-11322342-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"3\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39840914\u002F11322342\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-11322342-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"3\",\"dest\":\"https:\u002F\u002Fdownload.csdn.net\u002Fdownload\u002Fweixin_39840914\u002F11322342\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-download-2~default~OPENSEARCH~Rate-3-11322342-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"download"},{"url":"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43614129\u002Farticle\u002Fdetails\u002F119954263","title":"＜select＞＜\u002Fselect＞下\u003Cem\u003E拉\u003C\u002Fem\u003E框 禁用","desc":"第一种 下\u003Cem\u003E拉\u003C\u002Fem\u003E框 变成灰色\n\nstyle=“pointer-events: none;”\n\n 1. &lt;select name=\"yijiShenhe\" class=\"form-control m-b\" style=\"pointer-events: none;\"&gt;\n &lt;option th:each=\"dict : ${type}\" th:text=\"${dict.dictLabel}\" th:value=\"${dict.dictValue}\"&gt; ","createTime":"2021-08-27 15:47:43","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-119954263-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-119954263-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"4\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43614129\u002Farticle\u002Fdetails\u002F119954263\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-119954263-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"4\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43614129\u002Farticle\u002Fdetails\u002F119954263\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-4-119954263-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"blog"},{"url":"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43353088\u002Farticle\u002Fdetails\u002F109080222","title":"表格标签＜table＞＜\u002Ftable＞、表单标签 ＜form＞＜\u002Fform＞、CSS样式的使用与总结","desc":"一.表格标签&lt;table&gt;&lt;\u002Ftable&gt;\n1.重点总结\n\t\t&lt;table&gt;\n\t\t\t&lt;tr&gt; 表示行\n\t\t\t\t&lt;td&gt;&lt;\u002Ftd&gt; 表示列\n\t\t\t&lt;\u002Ftr&gt;\n\t\t&lt;\u002Ftable&gt;\n\t\t\tborder 边框\n\t\t\taligen 位置\n\t\t\twidth 宽度，table统一设置表格总 宽度，或者在td里单独设置单元格宽度，并影响同一列。\n\t\t\tbgcolor 背景色\n\t\t\tcolspan 在td中使用，表示可合并","createTime":"2020-10-14 18:52:05","dataReportQuery":"spm=1035.2023.3001.6557&utm_medium=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-109080222-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default&depth_1-utm_source=distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-109080222-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default","dataReportClick":"{\"mod\":\"popu_645\",\"index\":\"5\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43353088\u002Farticle\u002Fdetails\u002F109080222\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-109080222-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","dataReportView":"{\"mod\":\"popu_645\",\"index\":\"5\",\"dest\":\"https:\u002F\u002Fblog.csdn.net\u002Fweixin_43353088\u002Farticle\u002Fdetails\u002F109080222\",\"strategy\":\"2~default~OPENSEARCH~Rate\",\"extra\":\"{\\\"utm_medium\\\":\\\"distribute.pc_relevant_bbs_down_v2.none-task-blog-2~default~OPENSEARCH~Rate-5-109080222-bbs-424921.264^v3^pc_relevant_bbs_down_v2_default\\\",\\\"dist_request_id\\\":\\\"1715511264963_78523\\\"}\",\"spm\":\"1035.2023.3001.6557\"}","type":"blog"}],"staffDOList":[{"id":null,"communityId":233,"username":"community_116","userNickname":"其他","roleCode":1,"status":1,"createUsername":"","updateUsername":"","avatarUrl":"https:\u002F\u002Fprofile-avatar.csdnimg.cn\u002Fdefault.jpg!1","createTime":"2021-05-12 18:07:31","updateTime":"2021-05-12 18:07:31","lastLoginTime":"2021-05-12 18:07:31"}],"communityConfig":{"scoreType":0,"scoreItems":{"0":"给本帖投票","1":"锋芒小试，眼前一亮","2":"潜力巨大，未来可期","3":"持续贡献，值得关注","4":"成绩优异，大力学习","5":"贡献巨大，全力支持"}},"shouldApply":false,"subscribeAble":false,"operatorAble":false,"commentNeedJoinCommunity":false},"default2014LiveRoom":[{"itemType":"","description":"高峰论坛","title":"2022 技术英雄会","url":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fiframe\u002Fcsdnnews\u002FfsNR5NWp?chat=1&title=1&footer=1","images":["https:\u002F\u002Fimg-home.csdnimg.cn\u002Fimages\u002F20221016050009.png"],"ext":{"time":"9:00","liveRoomUrl":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fcsdnnews\u002FfsNR5NWp"}}]},"isGooglebot":false,"canonical":"https:\u002F\u002Fwww.csdn.net\u002Ftopics\u002F424921","openUrl":"","isApp":false,"localUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F424921","typeId":"index","hasIndex":false},"CFG":{"ALIPLAYER_VERSION":"v4","ALIPLAYER_H5_VERSION":"mobile_v1","ENV":"prod","ROOT_URL":"https:\u002F\u002Fcms-mall.csdn.net\u002F","VUE_APP_API_URL_SERVER":"http:\u002F\u002Fcms-community-api.internal.csdn.net\u002F","VUE_APP_API_URL":"https:\u002F\u002Fcms-api.csdn.net\u002F","LOGIN_URL":"https:\u002F\u002Fpassport.csdn.net\u002Faccount\u002Flogin","VUE_APP_DOMAIN_SKILL":"https:\u002F\u002Fedu.csdn.net\u002F","VUE_APP_DOMAIN_PATH":"https:\u002F\u002Fedu.csdn.net\u002F","VUE_APP_COMMUNITY_API_URL":"https:\u002F\u002Fcommunity-api.csdn.net\u002F","VUE_APP_CCLOUD_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fcommunity-cloud\u002Fv1\u002F","VUE_APP_SKILL_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fskilltree\u002Fapi\u002F","VUE_APP_SEARCH_PLUGIN_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002Fsearchplugin\u002F","VUE_APP_COMMUNITY_ASK_API_URL":"https:\u002F\u002Fmp-ask.csdn.net\u002F","VUE_APP_ME_URL":"https:\u002F\u002Fme.csdn.net\u002F","VUE_APP_CCLOUD_RESUME":"https:\u002F\u002Fbizapi.csdn.net\u002Fjob-api\u002F","VUE_APP_CCLOUD_MAIN":"https:\u002F\u002Fwww.csdn.net\u002F","VUE_APP_CCLOUD_UC":"https:\u002F\u002Fwww.csdn.net\u002F","VUE_APP_CCLOUD_BZP_API_URL":"https:\u002F\u002Fbizapi.csdn.net\u002F","VUE_APP_CCLOUD_START_API_URL":"https:\u002F\u002Fmp-action.csdn.net\u002F","VUE_APP_PRACTIVE":"https:\u002F\u002Fbizapi.csdn.net\u002Fdaily-practice\u002F","VUE_APP_CCLOUD_HOSTPATH":"https:\u002F\u002Fbbs.csdn.net\u002F"},"queries":{"pageId":[],"domain":["ccloud.csdn.net\u002Fccloud\u002Fdetail1"],"id":["424921"],"deviceType":"pc","isSpider":"","hostname":["bbs.csdn.net"]},"basePath":"bbs.csdn.net\u002Fccloud\u002Ftopics\u002F424921","hrefUrl":"https:\u002F\u002Fbbs.csdn.net\u002Ftopics\u002F424921","active":0,"navBarFixed":false,"title":"html如何做选择颜色的\u003Cselect\u003E下拉框？","isLive":false,"contentType":{"text":"text","picture":"picture","link":"link","video":"video","vote":"vote","live":"live","blog":"blog","long_text":"long_text","task_text":"task_text"},"liveUrl":"https:\u002F\u002Flive.csdn.net\u002Froom\u002Fiframe\u002F","spmExtra":{"id":233,"topicId":424921},"keywords":"","description":"以下内容是CSDN社区关于html如何做选择颜色的\u003Cselect\u003E下拉框？相关内容，如果想了解更多关于其他社区其他内容，请访问CSDN社区。"}; window.csdn.sideToolbar = { options: { qr: { isShow: true, data: [ { imgSrc: 'https://csdnimg.cn/release/cmsfe/public/img/ewm.9010d6e5.png', desc: "关注公众号" }, ] }, help: { isShow: false, }, contentEl: document.getElementsByClassName("cloud-maintainer")[0] }, };

[yancey]

每项就是一种颜色的那种，一时找不到，只能来问啦，谢谢

[孟子E章]

：）

[michael_chao]

@#$%^&*(

[bihu]

<select name="color" size="1">
<option value="White" style="color:white;">White</option>
<option value="Black" style="color:black;">Black</option>
<option value="Red" style="color:red;">Red</option>
<option value="Yellow" style="color:yellow;">Yellow</option>
<option value="Pink" style="color:pink;">Pink</option>
<option value="Green" style="color:green;">Green</option>
<option value="Orange" style="color:orange;">Orange</option>
<option value="Purple" style="color:purple;">Purple</option>
<option value="Blue" style="color:blue;">Blue</option>
<option value="Beige" style="color:beige;">Beige</option>
<option value="Brown" style="color:brown;">Brown</option>
<option value="Teal" style="color:teal;">Teal</option>
<option value="Navy" style="color:navy;">Navy</option>
<option value="Maroon" style="color:maroon;">Maroon</option>
<option value="LimeGreen" style="color:limegreen;">LimeGreen</option></select>

[jww330]

楼上的已经讲得很详细了，不用我多说了。好好努力呀。

[yancey]

我会了，谁来就送分
<select>
<option style="background:#FF0000"> </option>
</select>