<input> 寬度自適應變化

wangbjun 發(fā)布于2019-08-02 16:17 / 2260人閱讀

摘要：要實現(xiàn)上述的效果輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設(shè)置一個固定的寬度，它就會有一個默認的不變的寬度，想讓它動態(tài)伸展是不可能。

要實現(xiàn)上述的效果：輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設(shè)置一個固定的寬度，它就會有一個默認的不變的寬度，想讓它動態(tài)伸展是不可能。那怎么辦呢？

那就設(shè)置它的寬高都為100%，讓它隨著父元素改變，那父元素的寬高如何確定呢？給個標簽來撐起來，的寬高就可以根據(jù)它內(nèi)部的內(nèi)容來動態(tài)改變寬高啦，它內(nèi)部的內(nèi)容當然就是與輸入的內(nèi)容同步了，把標簽隱藏在標簽下面，暗搓搓地操控全局。


    {{ inputValue }}
    


...

 .add-tag {
    color: #333;
    border-style: dashed;
    padding: 0;
    position: relative;

    span {
        display: inline-block;
        min-width: 184px;
        height: 100%;
        padding: 0 32px;
    }

    input {
        display: inline-block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 28px;
        caret-color: #426BF2;
        ::-webkit-input-placeholder {
            color: #aaa;
        }
        border-radius: 40px;
        border-style: none;
        padding: 0 32px;
    }
}

GPU云服務器云服務器自適應寬度寬度自適應自適應寬度按鈕 rem寬度自適應

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/55019.html

相關(guān)文章

<input> 寬度自適應變化

摘要：要實現(xiàn)上述的效果輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設(shè)置一個固定的寬度，它就會有一個默認的不變的寬度，想讓它動態(tài)伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要實現(xiàn)上述的效果：輸入框的寬度隨著輸入的文字長度變化。而這個標簽有自己的想法，如果沒有給它設(shè)置一個固定的寬度...

levy9527 2019-08-30 10:50 評論0 收藏0
<<CSS揭秘>>：自適應的橢圓

摘要：自適應的橢圓利用生成橢圓。參考手冊橢圓對一個寬度和高度不同的容器進行如下設(shè)置，就得到一個橢圓半橢圓是一個簡寫屬性。分別對應著而實用斜線可以單獨指定水平半徑和垂直半徑。自適應的橢圓利用border-radius生成橢圓。CSS參考手冊橢圓對一個寬度和高度不同的容器進行如下設(shè)置，就得到一個橢圓border-radius: 50% showImg(https://segmentfau...

terasum 2019-08-29 11:19 評論0 收藏0
使用 <wbr> 解決長 URL 的換行問題

摘要：開發(fā)中，屏幕寬度有限，超長文字必須換行。嘗試原生方法無法解決問題，只好摸索手動斷行的做法。用解決這個問題困擾了我很久，直到前兩天，我突然發(fā)現(xiàn)原來有軟換行的存在。本案例中，使用實際上是想借用瀏覽器計算表格各列寬度的機制。問題我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語系。前者的換行很簡單，每個單字都有自己的意義，所以每個字后面都可以換...

104828720 2019-08-30 11:02 評論0 收藏0
使用 <wbr> 解決長 URL 的換行問題

摘要：開發(fā)中，屏幕寬度有限，超長文字必須換行。嘗試原生方法無法解決問題，只好摸索手動斷行的做法。用解決這個問題困擾了我很久，直到前兩天，我突然發(fā)現(xiàn)原來有軟換行的存在。本案例中，使用實際上是想借用瀏覽器計算表格各列寬度的機制。問題我們知道，世界上文字主要有兩種：一種是以中文為代表的象形文字；另一種是以英法俄等為代表的拼音語系。前者的換行很簡單，每個單字都有自己的意義，所以每個字后面都可以換...

lily_wang 2019-08-02 15:12 評論0 收藏0
vue實現(xiàn)伸縮菜單功能

　　效果展示：　　點擊即可隨意調(diào)節(jié)菜單寬度　　變動后　　頁面結(jié)構(gòu)一共分為三部分，加上一個伸縮按鈕，在你的項目對應的部分都加上class名。　　我這里定義的分別是box、left、mid、resize(按鈕類名)　　html　　頁面結(jié)構(gòu)劃分完成之后，完善一下樣式（直接復制，菜單類名換成你的）　　/*拖拽區(qū)div樣式*/ 　　.resize{ 　　cursor:col-resize; 　　positi...

3403771864 2022-09-12 20:06 評論0 收藏0