【CSS】input宽度根据内容自适应

目标:纯css实现以下功能

input 设置width:min-content | max-content;//无效

∵ 文本输入框通常会被浏览器渲染为具有固定宽度的控件。

解决方法:设置input的宽高都为100%,让它随着父元素的宽高改变。
父元素如何改变呢,给个看不见的标签(opacity:0)撑起来,这个看不见的标签的内容就是输入框的内容。

/**自适应宽度的输入框**/
.input-adaptive-width{display: inline-block;min-width: 20px;max-width: 200px;white-space: nowrap;position: relative;
}
.input-adaptive-width span {display: inline-block;height: 100%;background: inherit;/**继承父级**/padding: 0;white-space: nowrap;opacity: 0;
}
.input-adaptive-width input {display: inline-block;height: 100%;width: 100%;background: inherit;/**继承父级**/position: absolute;left: 0;top:0;padding: 0;opacity: 1;min-width: 20px;border: none;
}
.input-adaptive-width input:focus{outline: 0;
}
<span class="input-adaptive-width"><span>{{vm.newTag}}</span><input name="newTag" type="text" maxlength="20" ng-model="vm.newTag">
</span>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/17390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企企通入选第一新声《2024年中国CIO数字化产品选型白皮书》供应链数字产品可信名录

近日&#xff0c;第一新声研究院根据多年产业数字化研究&#xff0c;历经近半年时间&#xff0c;并综合近200位CIO调研与推荐意见&#xff0c;发布《2024年中国CIO数字化产品选型白皮书》&#xff0c;并推出企业CIO选型指南及可信产品名录。企企通凭借其优秀的采购数字化与供应…

让全世界都能使用你的代码:Python 模块上传 PyPI 全攻略(一步步带你发布自己的 Python 模块到 PyPI)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 PyPI 发布教程 📒📝 什么是 PyPI📝 模块的结构和必备文件📝 打包你的模块📝 上传到 PyPI📝 配置 PyPI 账号📝 解决常见问题⚓️ 相关链接 ⚓️📖 介绍 📖 你是否曾经想过,自己写的 Python 模块也能发布到 Py…

【乐吾乐3D可视化组态编辑器】模型类型与属性

编辑器地址&#xff1a;3D可视化组态 - 乐吾乐Le5le 本章主要为您介绍模型的属性功能。 一个模型至少会包含一个节点&#xff08;Node&#xff09;&#xff0c;从节点类型上可以分为转换节点&#xff08;TransformNode&#xff09;、网格&#xff08;Mesh&#xff09;、实例网…

【脑洞大开】Typora Plugin给你的Typora插上翅膀

很厉害的插件&#xff0c;好几个都是我想有但是没有支持的插件&#xff0c;比如标签页&#xff0c;全局关键字高亮 目前支持的功能&#xff1a; 序号插件功能1window_tab标签页管理2search_multi全局多关键字搜索3multi_highlighter多关键字高亮4collapse_paragraph章节折叠5c…

Linux定期清理nginx 日志

为了在Linux系统上定期清理Nginx日志&#xff0c;可以使用cron定时任务来自动执行日志清理脚本。以下是详细步骤&#xff1a; 1. 创建日志清理脚本 首先&#xff0c;创建一个脚本&#xff0c;用于归档和清理旧的Nginx日志。例如&#xff0c;将其命名为 /usr/local/bin/clean…

正确解决java.lang.NoSuchMethodException异常的有效解决方法

正确解决java.lang.NoSuchMethodException异常的有效解决方法 文章目录 报错问题报错原因解决方法 报错问题 java.lang.NoSuchMethodException异常 报错原因 java.lang.NoSuchMethodException 异常在 Java 中表示尝试通过反射&#xff08;java.lang.reflect 包&#xff09;调用…

【Sql Server】随机查询一条表记录,并重重温回顾下存储过程的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

小程序大能量:盲盒平台搭建与营销策略

一、引言 在移动互联网的浪潮下&#xff0c;小程序以其轻量级、即用即走的特点&#xff0c;成为了商家与消费者沟通的新桥梁。盲盒经济作为近年来兴起的消费趋势&#xff0c;结合小程序平台&#xff0c;不仅为用户带来了全新的购物体验&#xff0c;也为商家带来了更多的商业机…

k8s安装metrics组件

安装完dashboard之后&#xff0c;可以看到k8s所有组件&#xff0c;但各组件cpu内存使用量没有值&#xff0c;还需要安装metrics组件才行,安装完metric就可以看到各node以及pod的cpu/mem实时使用量了 下面是如何安装metrics 下载Metrics Server 配置文件 wget https://github.c…

leetCode.84. 柱状图中最大的矩形

leetCode.84. 柱状图中最大的矩形 题目思路 代码 class Solution { public:int largestRectangleArea( vector<int>& h ) {int n h.size();vector<int> left( n ), right( n );stack<int> st;// 求每个矩形的第一个小于左边界的矩形 - 用单调栈for ( …

颠仆流离学二叉树1 (Java版)

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

数码论坛|基于SprinBoot+vue的数码论坛系统(源码+数据库+文档)

数码论坛系统 目录 基于SprinBootvue的数码论坛系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2 管理员功能模块 3 用户后台管理模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&am…

盲人心理辅导课程:心灵的引路人

在这个快节奏的社会中&#xff0c;技术的每一次跃进都在悄然改变着人们的生活方式&#xff0c;尤其对于盲人群体&#xff0c;一款名为“蝙蝠避障”的辅助软件成为了他们探索世界的得力助手。通过实时避障与拍照识别功能&#xff0c;“蝙蝠避障”不仅保障了盲人朋友的日常安全&a…

学习java第八十三天

Spring中Bean的作用域&#xff1f; 1.singleton&#xff08;单例&#xff09;&#xff08;默认的&#xff09;&#xff1a;在整个应用中只创建一个Bean实例&#xff0c;并在容器启动时就创建&#xff0c;以后每次请求都返回同一个实例。 2.prototype&#xff08;原型&#xf…

java配置文件解析yml/xml/properties文件

XML 以mybatis.xml:获取所有Environment中的数据库并连接session为例 import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.Node; import org.w3c.dom.NodeList; import org.xml.sax.SAXException;import javax.xml.parsers.DocumentBuilder; impo…

【Docker|漏洞】Docker api未授权导致rce

一、漏洞描述 扫描出http://ip地址:4243漏洞&#xff0c;该漏洞可通过Docker pai未授权访问可以直接执行命令&#xff0c;获取服务器权限。 二、解决方案 禁用Docker api远程访问功能&#xff0c;或者通过安全授权等方式限制其使用权限。升级duoker至最新版本。 三、漏洞排查…

一款220V降12V恒压芯片电路原理图WT5114

一款220V降12V恒压芯片电路原理图WT5114&#xff0c;电路图简示如下&#xff1a; 一款220V降12V恒压芯片线路图WT5114 WT5114是一款高性能、高精度、低成本的PWM电源开关&#xff0c;适用于非隔离降压和反激式应用。它集成了专用电流模式PWM控制器&#xff08;采用SOP8封装的高…

2.8万字总结:金融核心系统数据库升级路径与场景实践

OceanBase CEO 杨冰 谈及数字化转型&#xff0c;如果说过去还只是头部金融机构带动效应下的“选择题”。那么现在&#xff0c;我相信数字化转型已经成为不论大、中、小型金融机构的“必答题”。 本文为OceanBase最新发布的《万字总结&#xff1a;金融核心系统数据库升级路径…

ubuntu安全加固

知识背景&#xff1a; 项目背景&#xff1a; 常用命令&#xff1a; useradd: adduser: getent passwd: getent group: id username: adduser newname sudo: 修改shell为/bin/bash 新用户默认为/bin/sh&#xff0c;可以通过echo $SHELL查询&#xff0c;默认不能使用TAB…

js处理服务器响应Blob对象格式文件处理

js验证http请求返回数据data是否为blob格式&#xff1a; // 验证是否为blob格式 export async function blobValidate(data) {try {const text await data.text();JSON.parse(text);return false;} catch (error) {return true;} }使用场景&#xff1a; import { saveAs } f…