input中加入图片的做法

最新推荐文章于 2024-06-18 17:03:40 发布
最新推荐文章于 2024-06-18 17:03:40 发布
阅读量3.7k 收藏 4
点赞数
原文链接：https://yq.aliyun.com/articles/50511
版权
本文介绍了在登录页面中为输入框添加小图标的常见做法，以提升用户体验。通过展示公司手机网站应用的实例，并提供相关代码，帮助读者理解并实现这一设计效果。
摘要由CSDN通过智能技术生成

有很多高大上的网站中都有这一做法。尤其是在登录页面，输入用户名和密码时加入小图标，看起来简单舒服。

下面就列举一下我们公司中手机网站应用的截图：


怎么样看起来还不错吧。下面直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<title>input中加入图片的做法</title>
		<!-- 这里图片用的是base64的做法，避免大家在使用我的demo的时候没有对应的图标 -->
		<style>
			.username {width:130px; background:#FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANfSURBVDhPRZRNaFxlFIa7dSuICzcuXERRKkh37uxGUGNB3KSCUqUIkaItVtDQpqUMlSYWUxo1qaYGbTRg1VItjS6sNGjF1CZVM5m/O/fOvfN77/xl/jPz+H63URcfd7jzneec85733B12pYdd6WCV2uQ2IZarkql2sfwmjt4ni5vE8zWSpQZufYt0uUu80MDT
最低0.47元/天 解锁文章
weixin_34200628
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input框添加图片按钮
02-07
为减少页面空间占用，将图片按钮放置在input输入框中，兼容火狐、谷歌和IE，图片自行替换
input里面添加图片
热门推荐
heromps的博客
01-13 2万+
input里面添加图片 思路：利用input背景图片来实现，主要使用的是css样background-image l利用background-image引入图片，background-image: url(/images/teststair/7-日历.png); 利用background-repeat去除背景图片重复， background-repeat: no-repeat; 利用background-position来设置图片位置， background-position: 80px; 具体实现：
input框中放置图标
最新发布
WUXIANJINBU的博客
06-18 1006
【代码】input框中放置图标。
input表单里加图片
12-07
在input里加背景图片，这样更容易让别人知道此input的功能
怎么给input插入一个图片
weixin_45439010的博客
10-11 1万+
html部分 <input type="text"> css部分 input{ border-radius: 5px; /*设置圆角半径*/ padding-left: 30px; /*设置内边距防止遮盖住图片*/ height: 36px; /*input高度*/ width: 240px; /*input宽度*/ background-image: url("im
html中input中加图片,css怎么在input里插图片？
weixin_35399893的博客
06-01 9293
一般的搜索框前面都会有一个搜索图标，今天我们就来看看实现的方法吧。css怎么在input里插图片？1、在包含input的div中设置子元素2、设置外层div定位为relative.search{position: relative;}(推荐学习：CSS视频教程)3、设置span定位为absolute，并设置宽高和背景图片.search > span{position: absolute;di...
微信小程序input框中加入小图标的实现方法
08-27
微信小程序input框中加入小图标的实现方法 微信小程序input框中加入小图标的实现方法是一种常见的需求，特别是在登录注册页面中。通常，我们可以使用background-image属性来实现，但是微信小程序中并不支持这种方法...
input输入框中有图片怎么使用css布局实现
09-25
在现代网页设计中，为了增强用户体验，常常会在输入框内或旁边添加图标或图片，以便用户更直观地识别输入框的作用。例如，用户名输入框可能旁边会有“@”的图标，密码输入框可能有“锁”的图标，这些都是常见的设计...
input框带图片的写法
weixin_33922670的博客
06-08 1249
，textarea直接指定宽度和高度 转载于:https://www.cnblogs.com/jinlonghu/p/9156070.html
【模仿案例】input插入透明背景图并设置背景色
Weiqian_的博客
04-11 2712
一、实现效果 二、分析需求： 1.圆角矩形文本框 2.左侧有一个搜索的小logo 3.内置有emoji和文字 三、实现思路 1.采用子绝父相定位 如果想将元素定位在一个具体的范围之内，又想让这个元素的位置可以随意调整，可以使用子绝父相（参考网址：关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）） 因为input内不能直接插入img，用背景图片的形式比较难调整css样式（个人想法），所以这里采用子绝父相的遮眼法把搜索logo置入input之中，后面也方便调整样式 <d
【HTML】——input，链接，图像
严文文 Chris
06-20 655
Input元素解析Input元素用于接收用户输入的信息Input元素是一个带有属性的空元素，用来创建表单中的控件&lt;input type=”” name=””size=”” value=””&gt;属性type用于指定要创建的控件的类型，属相name用来指定控件的名称，处理表单的服务器端脚本可以获取以名称-值对表示的表单数据，size属性用来指定表单中控件的初始长度 HTML文本被称为超文本，...
input 中放图片 css,input输入框中有图片怎么使用css布局实现
weixin_33601966的博客
08-04 1700
现在很多的页面为了美观、形象，一般都会在用户名，密码等输入框中加一个图片，以便更形象的说明这个输入框的用意。美工的一个小图片，却给前端带来了很多麻烦，如何定位小图片，并且兼容各大浏览器(包括ie6)成了一个令人头疼的问题。比如上图，具体的实现办法如下复制代码代码如下:复制代码代码如下:.item-ifo {position: relative;width: 307px;}.item-ifo .ic...
input上传图片，以及动态添加表单，img白边
皮蛋solo粥的博客
05-16 814
import './App.scss'; import { useState } from 'react'; function getBase64(img, callback) { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result)); reader.readAsDataURL(img); } function App() { const [b.
input如何添加图标
weixin_45475235的博客
05-25 422
input如何添加图标
怎么样在input标签选择是直接显示本地图片
阿幻技术学习
06-25 6532
第一步创建html，我们在页面中引入jquery库放置一个文件选择的和一个显示结果的div#image-wrap。 第二步我们创建一个jquery插件image-file-visible.js方便我们以后使用 //图片显示插件 (function($) {        $.imageFileVisible = function(
HTML input框里加图标
m0_57444344的博客
08-17 3033
Html input框里加小图标
input框前追加图片
俺叫赵小邪的博客
09-05 2万+
html实现input框前追加图片
el-input 里面插入图片
09-21
在el-input中插入图片需要使用CSS样式来实现。你可以使用background属性来设置背景图像，并通过设置background-position来控制图像的位置。在给el-input添加类名后，你可以使用该类名来定义样式，例如设置背景图像的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值