input裡新增小圖示（實用、贊）

阿新 • • 發佈：2018-12-19

https://blog.csdn.net/chengQunBin/article/details/78505654

方法一

將小圖示當做input的背景來插入，直接上程式碼吧：

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                border: none;
            }
            .box{
                height: 50px;
                background: yellow;
            }
            .box input{
                width: 200px;
                height: 30px;
                border-radius: 15px;
                margin: 10px 0;
                background: url(image/search.gif) no-repeat;
                background-color: white;
                background-position: 3px;
                padding-left: 30px;
                border: 1px solid black;
                outline: none;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" class="username" value="搜尋"/>
        </div>
    </body>

效果圖：

方法二

使用 i 標籤插入

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            position: relative;
        }

            .box .icon-search {
                background: url(find.png) no-repeat;
                width: 30px;
                height: 50px;
                position: absolute;
                top: -1px;
                left: 0;
            }

            .box .username {
                padding-left: 30px;
                height: 25px;
            }
    </style>
    </head>
    <body>
        <div class="box">
            <i class="icon-search"></i>
            <input type="text" class="username" value="搜尋"/>
        </div>
    </body>

效圖：

個人總結：

原理就是在input下面添加了底圖，感覺第一種方法更好，可以少用元素

擴充套件一下估計就可以實現如下圖的錄入錯誤提示了
1-XVZetm1skdL5b5csfWCVkg

input裡新增小圖示（實用、贊）

https://blog.csdn.net/chengQunBin/article/details/78505654 方法一將小圖示當做input的背景來插入，直接上程式碼吧： <style type="text/css"> *{

Angular引入第三方庫（實用、贊）

原文出處：https://blog.csdn.net/yuzhiqiang_1993/article/details/71215232 延伸閱讀：Angular專案目錄結構詳解（贊）如果我們想在Angular中使用第三方的庫，比如jquery或bootstrap等，該如果做呢？首先我們

Angular : 專案資料夾src目錄結構及作用（實用、贊）

原文出處：https://blog.csdn.net/Edison_03/article/details/78928558 序言：如果你想入門到精通Angular，首先必須要熟悉它的檔案目錄結構。參考：Angular中文文件連結正文： 1、新建專案檔案後，會出現src和非src（

sqlser 2005 使用執行計劃來優化你的sql （實用、贊）

原文出處：https://www.cnblogs.com/cq-jiang/p/7711680.html （建議閱讀原文）一:sqlserver 執行計劃介紹　 sqlserve

強大的螢幕適配佈局rem響應式實現一套web程式碼多端自適應適配（實用、贊）

原文出處：https://blog.csdn.net/qq_14997169/article/details/53914201 實現強大的螢幕適配佈局流式的佈局、固定的寬度，還有響應式來做，但是這些方案都不是最佳的解決方法。->->rem rem是什麼？

HTML自學筆記_新增div標籤（容器、區塊）

<div> 標籤的加入，將所有內容元素歸併到一個區塊中，使頁面結構性更強為了後續進一步控制這個區塊的顯示，可以賦予這個 div 一個名字，以直接對應這個區塊 <div id=“container”> <!DOCTYPE html>

小模板（C++、Python）

此模板限於MAC上的Clion C++ 模板在Clion上除錯C++程式時： 1. 修改CmakeLists.txt 裡的內容 cmake_minimum_required(VE

vue App.vue檔案裡引入外聯樣式（css、less）

vue-cli安裝並配置好less-loader、css-loader後 <style lang="less" scoped src="../dist/css/order.less"><

【薦】Angular官方程式碼風格指南 (實用、贊）

原文出處：https://blog.csdn.net/fen747042796/article/details/78880424 本文為筆者對Angular官網風格指南的整理版本，刪除／增加了部分內容。另外，原文對每個規範都作出了原因的解釋，個別還有示例，需要的請點選檢視原文。原連結：英文

JS中setInterval()和clearInterval()的使用以及注意事項（實用，贊）

原文出處：https://blog.csdn.net/YDesire/article/details/81124331 延伸閱讀：clearInterval(timer)和timer = null的區別 setInterval()：間隔指定的毫秒數不停地執行指定的程式碼，定時器 clear

【譯】怎樣編寫移動優先的CSS (實用、贊）

原文出處：https://www.cnblogs.com/huansky/p/6095854.html 原文：How To Write Mobile-first CSS 作者：譯者：huansky 構建響應式網站是今天前端開發人員必備的技能。當我們談論響應式網站時，移動優先這個詞

移動前端自適應適配佈局解決方案和比較(實用、贊）

原文連結：http://caibaojian.com/mobile-responsive-example.html （修飾過）網際網路上的自適應方案到底有幾種呢？就我個人實踐所知，有這麼幾種方案：固定一個某些寬度，使用一個模式，加上少許的媒體查詢方案使用flexbox解決方

em的計算方法(實用、贊）

之前據我所瞭解css中em不是一個固定值，而是一個相對值，它的值等於父元素的font-szie，即1em=父元素的font-szie，如果父元素沒有font-szie那麼取瀏覽器的預設值（一般為16px，可以理解為父元素繼承所得的font-size），但是這種理解是片面的。例如： <

unity_實用小技巧（敵人追蹤主角）

ren 聽力 5* iss 發現 date() ima nav path 首先要明白敵人發現主角可以通過兩種形式：一種是看見主角（即主角出現在敵人的視野之內）。另一種是聽見主角（即聽見主角走路聲或者是跑步聲）第一種形式：看。如下圖，判斷主角是否在敵人視野角度內，只需判

Redis集群中新增節點（master、slave）（實驗）

redis集群添加節點 redis集群添加master節點 redis集群添加slave節點新增master節點的配置文件： # vim /usr/local/redis-3.0.6-6379/redis.conf daemonize yes

Linux下，為應用程式新增桌面圖示（ubuntu18.4）

一、桌面圖示位置 Lniux下桌面圖示儲存路徑為：/usr/share/applications 二、桌面圖示格式所有桌面圖示格式均為desktop，即名為XXX.desktop 三、編輯內容（常用） // 檔案頭（必須） [Desktop Entry] /

純CSS製作各種各樣的網頁圖示（三角形、暫停按鈕、下載箭頭、加號等）

三角形 ? 1 2 3 4 5 6 7 8 9 10 11 <div class="box"></div> <style> .box{ &

微信小程式-06 tab選項卡滑動切換與列表Item（scroll 、 swiper）資料的獲取等所用到的都有了

目錄示例圖片 WXML js WXSS 示例圖片 WXML <view > <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}

LeetCode 209. 長度最小的子陣列（C++、python）

給定一個含有 n 個正整數的陣列和一個正整數 s ，找出該陣列中滿足其和 ≥ s 的長度最小的連續子陣列。如果不存在符合條件的連續子陣列，返回 0。示例: 輸入: s = 7, nums = [2,3,1,2,4,3] 輸出:

怎麼在vue專案中的瀏覽器網頁標題新增小圖示

1.專案需求：在網頁標題處新增小圖示如下所示 2.在Vue專案資料夾目錄中找到index.html 如下所示 3.將所需圖示放在static目錄下如下所示為什麼放在static目錄下，而不是放在src目錄下呢？因為放在src下瀏

input裡新增小圖示 （實用、贊）

方法一

方法二

相關推薦

input裡新增小圖示（實用、贊）