zoukankan      html  css  js  c++  java
  • input如何添加图标

    代码:<input type="text" class="user" />

    设置class类属性,添加小图标。创建<style>标签,然后在这个标签里面设置user样式。

       1.使用background-image设置input背景图片;

       2.background-size设置背景图片的大小;

      3.background-position设置背景图片的位置;

      4.background-repeat设置背景图片不重复;

      5.padding设置图片的内边距。

    css样式代码:

    <style type="text/css">

     .user{

       background-image: url(img/user.png);/*设置小图标*/

      background-size: 25px 25px;/*小图标的大小*/

      background-position: 5px 4px;/*小图标在input的位置*/

      background-repeat: no-repeat;/*背景小图标不重复*/

      padding: 8px 10px 8px 40px;/*设置input内边距*/

      /*设置input样式好看*/

      border:1px solid #ddd;

      margin: 30px;

       220px;

    }

    </style>

    窗竹影摇书案上,野泉声入砚池中。 少年辛苦终身事,莫向光阴惰寸功
  • 相关阅读:
    现在SimpleMemory的CSS(by BNDong)
    I AK IOI
    最大半联通子图
    曾经SimpleMemory的CSS
    幼儿园战争
    炸掉卡西欧991CNX
    LuoguP1131选择客栈
    2019CSP-S2养成任务
    NOIP2013&NOIP2018&USACO 三倍经验铺路题巧妙解法
    NOIP2018D2T1 旅行
  • 原文地址:https://www.cnblogs.com/qhantime/p/11328245.html
Copyright © 2011-2022 走看看