当前位置：网站首页 > 技术文章 > 正文

input输入框最常用样式修改

zhezhongyun 2025-05-25 16:43 4 浏览

input框有默认的样式，但在实际项目开发中，经常要根据美工的设计图对输入框的样式进行修改，这里把我在项目中最常用到的关于input样式修改的代码进行了整理，可以用于学习，也可直接运用。

修改input框的长、宽、背景颜色、边框、字体、字体、颜色等常用样式。

input {
  width: 100px; // 宽度
  height: 40px; // 高度
  color: #fff; // 输入值的颜色
  font-size: 16px; // 字体大小
  font-family: Arial, Helvetica, sans-serif; // 字体
  background: transparent; // 背景透明
  border: 1px solid #56deff; // 边框颜色
  border-radius: 6px; // 边框圆角
}

修改input框选中（聚焦）时的样式，主要是修改选中的边框样式，最常用的是去掉这个边框，这里要注意的是这里说的边框实际是轮廓，所以不是用border去修改，而是用outline来进行修改，如果要去掉默认的样式，将其值设为none即可。

input:focus {
      outline: 1px solid rgba(135, 182, 255, 0.85); 
      // 去除边框
      // outline: none;
 }

修改placeholder的样式，比如字体、字体颜色、字体大小等。

input::-webkit-input-placeholder{
     color:#f0f; 
     ... ...
}

去除将type=number时出现在右侧的小箭头。

input::-webkit-outer-spin-button,  
input::-webkit-inner-spin-button {
       -webkit-appearance: none;
}

去除chrome中记住密码后的背景。

input:-webkit-autofill {
  	-webkit-box-shadow: 0 0 0 1000px white inset !important;
}

CSS 轮廓（outline）属性

上一篇：用Python实现一个简单的图片编辑功能界面
下一篇：负边距在布局中的使用

相关推荐

浅谈html元素的float属性: 在web网页制作的工作中，元素的float属性非常常用。顾名思义float属性就是浮动的意思，运用了浮动属性的元素常称为浮动元素。我们经常使用元素浮动属性来控制网页的结构以及制作一些酷炫的效果。但是这...

3种CSS清除浮动的方法: 今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。下面我就讲3种常用清除浮动的...

详解css清除浮动方法: 清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，网上是有很多文章讲过，我们先用一个非常简洁易用实例开始吧！给需要闭合的DIV（class为clearfix）加...

那些技术—css浮动详解(附图): 1.Floatbasics浮动基础在了解浮动之前，要先了解文档流。文档流是正式输出的流。元素在前面的元素先输出。元素写在后面的后输出。块级元素占满一行。内联元素按内容的大小占空间。且不占一行。文...

CSS 浮动(float) 宝妈级教程通俗易懂: 标准流标签按照规定好的默认方式排序块级元素独占一行从上向下顺序排列divhrph1-h6ulolformtable<!DOCTYPEhtml><htmllan...

从访问URL到浏览器渲染: DNS查询当用户在地址栏输入一个URL，浏览器要做的第一步是要去寻找页面资源的位置。如果导航到https://example.com，HTML页面被定位到IP地址为93.184.216....

前端入门——弹性布局(Flex): 前言在css3Flex技术出现之前制作网页大多使用浮动（float）、定位（position）以及显示（display）来布局页面，随着互联网快速发展，移动互联网的到来，已无法满足需求，它对于那些...

css网格布局之快速入门: Grid简介CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局...

面试焦虑!每日 1 道 CSS 题!吃透这些面试稳拿高薪: 前端工程师们，是不是总在加班改样式、调布局？看着别人轻松通过大厂面试，自己却在面试官的CSS问题前栽跟头，心里焦虑又无奈？别慌！从今天起，跟着我每日一道CSS样式类高频面试题，把这些知识点吃透...

在 CSS 布局中，用 float 和 position 的区别是什么?: 呃，其实这个命题有误，只有position才是定位，float不能说是定位，不过你可以说这两种布局方式有什么不同。float和position这两者并没有孰好孰不好的问题，两者按需使用，各得所需的效果...

2025年Python爬虫学习路线:第1阶段爬虫基础入门开始: 这个阶段的目标是让你熟悉Python的基础知识、了解HTTP请求和HTML是如何工作的，并最终完成你的第一个爬虫小项目——抓取名言！按照计划，我们首先要打好Python基础。Python就像是我们要...

肖sir_python的xpath定位方法详解: xpath的定位方法：（1）fullpath：是绝对路径/html/body/div[3]/div[1]/div[5]/div/div/form/span[1]/input绝对路径方法写法：a./...

Selenium自动化测试学习元素定位之ID定位: Selenium提供了下面的方法进行元素定位：find_element_by_idfind_element_by_namefind_element_by_xpathfind_element_b...

PM小技术:图片随手找，原型快又好: 将各种最好用的图片资源，以及获取这些图片资源的方法掌握以后，我们就可以将精力放在更深一层的设计上，而不会因为某个返回箭头巨丑，心里一直堵着，偏偏想把它改好看的纠结上了。本文将介绍一些产品经理快速找到顺...

「CSS」 Position 用法进阶01:匹配父级容器空间: 引入在前端界面设计中，会有那么一些布局，需要占满整个父级容器，比如：以上两种组件中，都是将背景完全填充到父级容器，区别在于模态框通常是背景填满屏幕，通常使用position:fixed;用于定位...

一周热门

最近发表

首页
收录
顶部