CSS及表单常用代码

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

圆角CSS:

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

强制换行:

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

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

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

上传文件表单属性:

  1. enctype="multipart/form-data"

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

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

透明效果

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

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

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

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

  1. @media screen and (min-height:800px) and (max-height:900px){
  2.  .box_top{margin-top:70px;}
  3. }
  4.  
  5. @media screen and (min-height:901px) and (max-height:1050px){
  6.  .box_top{margin-top:90px;}
  7. }
  8.  
  9. @media screen and (min-height:1051px) {
  10.  .box_top{margin-top:120px;}
  11. }

Select分组

  1. <select>
  2.   <optgroup label="Swedish Cars">
  3.     <option value ="volvo">Volvo</option>
  4.     <option value ="saab">Saab</option>
  5.   </optgroup>
  6.  
  7.   <optgroup label="German Cars">
  8.     <option value ="mercedes">Mercedes</option>
  9.     <option value ="audi">Audi</option>
  10.   </optgroup>
  11. </select>

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

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


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