专业编程基础技术教程

网站首页 > 基础教程 正文

input,button在移动的处理方案

ccvgpt 2024-08-09 11:53:10 基础教程 9 ℃

解决移动端input框样式问题终极方案

input{
	border:none;
  outline:none;
  background-color:transparent;
  /*FILTER: alpha(opacity=0)*/
  -webkit-appearance:none;
  resize:none;
  box-sizing:border-box;
  border-radius:0;
}

input[type=button], input[type=submit], input[type=file], button {
  cursor:pointer;
  -webkit-appearance:none; 
}

input::-webkit-input-placeholder {
/* placeholder颜色  */
  color:#cccccc;
  /* placeholder字体大小  */
  font-size:.3rem;
}

常用方式

input,button在移动的处理方案

input:-webkit-autofill,
textarea:-webkit-autofill, 
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

.button{
  outline: 0;
	border: 0;
	-webkit-appearance: none;
}

input:focus,
textarea:focus {
	border: 1px solid #dedede;
	outline:none; 
	-webkit-appearance: none;
}

最近发表
标签列表