input 标签宽度自适应

最新推荐文章于 2024-05-21 13:55:13 发布

‍。。。

最新推荐文章于 2024-05-21 13:55:13 发布

阅读量979

点赞数 7

分类专栏： html vue 文章标签： css html web

本文链接：https://blog.csdn.net/weixin_43794095/article/details/136397138

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用Vue.js配合CSS，使输入框的宽度根据用户输入自动调整，通过设置子元素撑起父元素并隐藏输入框实现效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

要实现的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。那怎么办呢？

那就设置它的宽高都为100%，让它随着父元素改变，那父元素的宽高如何确定呢？给个标签来撑起来，的宽高就可以根据它内部的内容来动态改变宽高啦，它内部的内容当然就是与输入的内容同步了，把标签隐藏在标签下面，暗搓搓地操控全局。

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
    
    <div class="add-tag tag-item">
    <span>{{ inputValue }}</span>
    <input 
        placeholder="添加标签"
        v-model="inputValue" 
    />
</div>
  </div>

</body>
</html>

 .add-tag {
    color: #333;
      
    padding: 0;
   min-width: 40px;
    position: relative;
   display: inline-block;

    span {
        display: inline-block;
        
        height: 100%;
      font-size: 28px;
        background: #f0f;
    }

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