前端开发常用CSS效果 汇总
摘要：前端开发年度工作内容|前端开发有哪些网站可以看|网站前端程序制作开发 1. 不让用户复制，设置div禁止选择的功能 html 代码 unselectable=”on” onselectstart=”return false;” 2. 给input……
前端开发年度工作内容|前端开发有哪些网站可以看|网站前端程序制作开发
1. 不让用户复制，设置div禁止选择的功能
html 代码
unselectable=”on” onselectstart=”return false;”
2. 给input的placeholder设置颜色
html 代码
::-webkit-input-placeholder {
/* WebKit browsers */
color: #999;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #999;
}
3. css选中状态修改
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<style type=”text/css”>
::selection {
background: #f60;
color: #fff;
}
</style>
</head>
<body>
<p>CSS选中状态修改 </p>
</body>
</html>
4.css input上传文件按钮美化
html 代码
<!DOCTYPE html>
<html lang=”zh”>
<head>
<meta charset=”UTF-8″ />
<style type=”text/css”>
.input-file {
position: relative;
display: inline-block;
background: #f60;
border: 1px solid #f50;
border-radius: 2px;
overflow: hidden;
color: #fff;
font-size: 20px;
text-decoration: none;
line-height: 20px;
text-align: center;
}
.input-file input[type=file] {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.input-file:hover {
background: #f50;
border-color: #f50;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<a href=”javascript:;” class=”input-file”>选择文件
<input type=”file” name=”” id=””>
</a>
</body>
</html>
web前端是网站开发么|前端快速开发网站|重庆web前端开发培训班
» 本文来自：前端开发者 » 《前端开发常用CSS效果 汇总》
» 本文链接地址：https://www.rokub.com/4571.html
» 您也可以订阅本站：https://www.rokub.com
近期评论