首页 > 其他分享 >【CSS】写一个原生的透明 input 标签输入框

【CSS】写一个原生的透明 input 标签输入框

时间:2023-06-26 20:56:21浏览次数:70  
标签:none width color 输入框 input border CSS

在这里插入图片描述

<div class="search">
	<img src="@/assets/tools/search.svg" />
	<input placeholder="搜索" @input="onSearch" v-model="searchValue" />
</div>
.search {
	height: 32px;
	width: 204px;
	display: flex;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #888888;
	border-radius: 16px;
	margin: 10px;
	justify-content: center;

	input {
		background: transparent;
		border: none;
		color: #fff;
		padding: 0 10px;
		width: 100%;
		outline: none;
		font-size: 14px;
	}

	input::-webkit-input-placeholder {
		color: #dddddd;
	}
}

标签:none,width,color,输入框,input,border,CSS
From: https://www.cnblogs.com/wx980416/p/17506676.html

相关文章

  • input样式重置
    input样式重置(outline:none) input样式重置(outline:none)我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢?例如简单的三个空按钮:<inputtype="button"id="btn1"><inputtype="button"i......
  • CSS3 px 和 em 和 rem
    px为单位:px实际上就是像素,用PX设置字体大小时,比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说,就是一个大问题了。因此,这时就提出了使用“......
  • CSS3 初始化的思路
    /*css初始化begin*/html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{ margin:0; padding:0;}fieldset,img,input,button{ border:none; padding:0; margin:0; outline-style:none;/*去掉input获取焦点后的......
  • CSS 尺寸单位和颜色单位
    尺寸单位描述%百分比in英寸cm厘米mm毫米em1em等于当前的字体尺寸。2em等于当前字体尺寸的两倍。例如,如果某元素以12pt显示,那么2em是24pt。在CSS中,em是非常有用的单位,因为它可以自动适应用户所使用的字体。ex一个ex是一个字体的x-height。(x-height通常是......
  • CSS 选择器参考手册
    在CSS中,选择器是一种模式,用于选择需要添加样式的元素。"CSS"列指示该属性是在哪个CSS版本中定义的。(CSS1、CSS2还是CSS3。) 选择器例子例子描述CSS.class.intro选择class="intro"的所有元素。1#id#firstname选择id="firstname"的所有元素。1**选择所有元素。2elementp选......
  • css属性中的 filter 和 backdrop-filter 使用
    filterCSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter/*URLtoSVGfilter*/filter:url("filters.svg#filter-id");/*<filter-function>values......
  • CSS样式(内联、内部、外部)
    https://blog.csdn.net/xiji333/article/details/111283931文章目录1.内联样式2.内部样式3.外部样式1.内联样式  内联样式,又称行内样式。在标签内部通过stylestylestyle属性来设置元素的样式。<!DOCTYPEhtml><html><head><metacharset="utf-8"><ti......
  • 爬虫如何通过HTML和CSS采集数据的 ?
    爬虫可以应用于各种应用场景,包括数据分析、市场研究、舆情监测、竞争报、价格比较、内容聚合等。对于需要大量数据的业务和研究领域,爬虫能够提供宝贵的支持。爬虫可以按照设定的规则从多个网进行批量数据抓取,比人工手动方式更高效。量数据,并支持后续的数据分析和决策。爬虫可以通......
  • 爬虫如何通过HTML和CSS采集数据的 ?
    爬虫可以应用于各种应用场景,包括数据分析、市场研究、舆情监测、竞争报、价格比较、内容聚合等。对于需要大量数据的业务和研究领域,爬虫能够提供宝贵的支持。爬虫可以按照设定的规则从多个网进行批量数据抓取,比人工手动方式更高效。量数据,并支持后续的数据分析和决策。爬虫可以......
  • css之selection---让“选择”更色彩
    一直以来很少人关注也门文字的选中文字的控制,但是不乏在一些细心的网站会加一些这样的设置。 CSS3新增的伪::selection,可以帮助我们来改变选择文本的颜色和背景。  ::selection{color:#333;background-color:#cca2da;}::-moz-selection{color:#333;background-color:#cca2da;}......