html5网页如何将小图标放入可选框中

如何将小图标放入可选框中，自己做的怎么都进不去方框，
如何在标框中加入小图标
还有留言模块如何居中


<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>


或者

.icon {
  padding-left: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
  background-size: 20px;
}
<input type="text" class="icon" value placeholder="Search">


大致方法：

先做一个div 将搜索框

<input type="text" placeholder="并没有什么用的搜索栏" class="serch"></input>

和

带有链接的搜索图标

<div class="pic"><a href="#"><img src="搜索.png" alt=""></a></div>

放入。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN_TEST</title>
    <style>
        .funkystyling {
            background: white url(./magnifier.png) left no-repeat;
            padding-left: 17px;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>用户名:</td>
        <td>
            <input type="text" name="whatever" id="funkystyling" class="funkystyling"/>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: center">用户名:</td>
        <td><textarea cols="60" rows="10"></textarea></td>
    </tr>
</table>

</body>
</html>

我遇到这种问题，一般都是找个网站看看他的怎么写的，然后copy一份就可以了

首先页面布局这种，多写一些，记录一些坑，一些经验，做的多了，自然就会了。
这个问题，简单点有两种方式实现，
一，可以给选择框设置背景图片，背景图片的大小位置等。
二，可以利用定位，小图片和选择框外边加一个div，并且设置定位为相对定位，然后小图片设置绝对定位定位到左侧就可以了。
方法已经有了，自己动手去实现一下，不要简单的复制，那样记忆不深刻，如果有问题，再回来问，或者给我发私信

加这种小图标，一种方法是采用定位，你的输入框可以是input，也可以是div。
另外一种方法就是给input或者div加背景图片呗！
至于最后将你整个留言模块居中，有很多种方法，
可以是margin:0 auto;这个整个留言模块有宽度就可以实现居中。
另外，也可以用flex布局，让整个留言模块居中。

新建一个html文件，命名为test.html，用于讲解html中怎样在文本框中添加小图标。
在test.html文件内，使用input标签创建一个文本框，用于测试。
在test.html文件内，设置input标签的class为myser，用于下面设置样式。
在test.html文件内，编写

<style type="text/css"></style>


```标签，页面的css样式将写在该标签内。
在css标签内，通过class设置input文本框的样式，使用background属性设置input的背景图片为icon.jpg，即可完成小图标的添加，并使用padding-left属性设置左边距为20px，主要是用于让文本框的输入内容在小图标后面。
详情可以看一下
https://jingyan.baidu.com/article/4dc40848f53a8989d846f16c.html

使用css 里的backgroud-image 设置图的postion设置图标位置，然后设置个padding-left 留出图标的展示区域
多个标签组合 css样式大致模拟出文本框的样子

这个你用定位不就行了吗？子绝父相把图标它定位进去。

1.设置统一样式padding-left预留空间span img装载小图标若要放输入框里面，在前面的基础上需要设置定位定里面就行
2.给文本域设置displat:flex justify-content:center 或者是设置定位left50%translateX：-50%但是定位设置绝对不占空间相对又得找top不太推荐定位方法或者利用margin或版心可能又有些许普通看着办自己想用哪种用哪种吧

定位，浮动都可以

加个DIV浮上去行吗

background

找个成熟的框架最简单，比如bootstrap等等

html5网页 如何将小图标放入可选框中

html5网页如何将小图标放入可选框中