CSS及表单常用代码

前端开发   发布日期:2023年05月05日   浏览次数:371

圆角CSS:

-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;

强制换行:

white-space:pre-wrap;word-wrap:break-all;

输入提示、隐藏焦点、禁用默认填充:

<input type="text" value="" placeholder="请输入短信验证码" hidefocus="true" autocomplete="off" />

上传文件表单属性:

enctype="multipart/form-data"

禁用IE浏览器input的删除按钮

input::-ms-clear{display:none;}

透明效果

 filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;

360浏览器input自动填充淡黄色背景怎么解决

//给input设置内置阴影!而且一定要大,至少要比你的input本身大
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

根据不同分辨率调用不同CSS样式

@media screen and (min-height:800px) and (max-height:900px){
 .box_top{margin-top:70px;}
}

@media screen and (min-height:901px) and (max-height:1050px){
 .box_top{margin-top:90px;}
}

@media screen and (min-height:1051px) {
 .box_top{margin-top:120px;}
}

Select分组

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

css 两行、多行超出后用省略号...表示

.item-name {
      letter-spacing: 0;
      overflow: hidden;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;  /*要显示的行数*/
      -webkit-box-orient: vertical;
      font-size:12px;
    }


以上就是CSS及表单常用代码的详细内容,更多关于CSS及表单常用代码的资料请关注九品源码其它相关文章!