JS Input里添加小图标的两种方法
网络编程 2025-03-23 23:39www.168986.cn编程入门
网页设计中,为Input添加小图标已经成为了一种常见的功能。虽然看似简单,但实现起来还是需要一些技巧。今天,长沙网络推广为大家介绍两种在JS Input中添加小图标的方法,希望大家能够从中受益。
方法一:利用背景图片法
```html
input {
border: none; / 移除边框 /
}
.box {
height: 50px; / 设置输入框高度 /
background: yellow; / 设置背景色 /
}
.box input {
width: 200px; / 设置输入框宽度 /
height: 30px; / 设置文本高度 /
border-radius: 15px; / 设置边框圆角 /
background: url(image/search.gif) no-repeat; / 设置背景图片为小图标 /
background-color: white; / 设置背景色 /
background-position: 3px; / 调整背景位置 /
padding-left: 30px; / 设置内边距以预留图标位置 /
border: 1px solid black; / 设置边框样式 /
outline: none; / 移除轮廓线 /
}
```
在CSS中设置i标签的样式和位置:
```html
.box { / 设置容器样式 / } 省略其他样式设置...
上一篇:phpStudy配置多站点多域名和多端口的方法
下一篇:没有了
编程语言
- JS Input里添加小图标的两种方法
- phpStudy配置多站点多域名和多端口的方法
- 快速解决ajax返回值给外部函数的问题
- javascript禁止超链接跳转的方法
- Ajax实现文件下载
- 利用NPM淘宝的node.js镜像加速nvm
- javascript实现链接单选效果的方法
- js创建jsonArray传输至后台及后台全面解析
- 浅谈web上存漏洞及原理分析、防范方法(安全文
- Node.js爬取豆瓣数据实例分析
- JS声明对象时属性名加引号与不加引号的问题及解
- js与jquery回车提交的方法
- JS点击图片改变图片图径并用正则表达式取图片名
- TypeOf这些知识点你了解吗
- PHP通过引用传递参数用法分析
- 用JS让文章内容指定的关键字加亮