去除表单元素默认样式

都挺好，刚刚好

于 2023-05-18 10:36:56 发布

阅读量175

点赞数

分类专栏： CSS 文章标签： css javascript html

本文链接：https://blog.csdn.net/seimeii/article/details/130741804

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

input,
textarea {
  outline:0;
  border:0;
  -webkit-appearance: none;
  -moz-appearance:none;  
  appearance: none;
  line-height:normal;
}
// input::-webkit-input-placeholder{
//   line-height: normal;  //解决不垂直居中的问题
// }
input::-webkit-input-placeholder{
  line-height: normal;
}
input::-moz-placeholder{
  line-height: normal;
}
input::-ms-input-placeholder{
  line-height: normal;
}
select{
  /*去除外边框*/
  border: none; 
  /*适应safari浏览器内容不跑偏*/
  line-height: 1;
  width: 100%;
  /*将默认的select选择框样式清除*/  
  appearance:none;  
  -moz-appearance:none;  
  -webkit-appearance:none;  
  /*在选择框的最右侧中间显示小箭头图片*/  
  background: url("~@/assets/images/btn_pulldown.png") right center/25px 10px no-repeat ;
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/  
  padding-right: 30px;
  /*去除选中时样式*/
  outline: none;
  /*去除点击一闪而过的灰色背景*/
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}