如何让slect下拉图标显示在左边

 时间:2024-10-14 00:34:09

1、首先在编辑器中新建立一个html页面,命名为select.html标题为“如何让slect下拉图标显示在左边”。

如何让slect下拉图标显示在左边

2、自己做一个下拉的小图标放在该文件目录下的images的文件夹中。

如何让slect下拉图标显示在左边

3、在selecthtml的body中加入一个select控件,并列出两个选项

4、为了能看的更清楚一些,给select控件加一个样式设置宽为200像素,适当的往页面的中间调整一下。

如何让slect下拉图标显示在左边如何让slect下拉图标显示在左边

5、为了加自己定制的图标首先将默认的select选择框样式清除掉将appearance设置为none;

如何让slect下拉图标显示在左边如何让slect下拉图标显示在左边

6、在样式中加入向下箭头图片的背景 图片,并将图标的位置设置在select的左边

如何让slect下拉图标显示在左边如何让slect下拉图标显示在左边

7、select的选项的文字压在了图标上这样是很不美观的,我们可以将文字向右移动下,将箭头图标完全显示出来

如何让slect下拉图标显示在左边如何让slect下拉图标显示在左边
  • 在MS Word中自动显示创建时间或最后编辑时间
  • 初级会计实务技巧:[1]交易性金融资产
  • 森林之子体力怎么恢复 快速恢复体力攻略
  • 如何轻松点点鼠标操作重命名?
  • 如何快速比较两个word文档内容的异同
  • 热门搜索
    韩语我爱你怎么说 水土不服拉肚子怎么办 牡丹花怎么栽培 贫血怎么治疗 小便出血是怎么回事 饼干怎么做 电脑c盘怎么清理 电脑中病毒了怎么办 性冷淡怎么办 win10怎么关闭自动更新