前端开发常用CSS效果 汇总

前端开发年度工作内容|前端开发有哪些网站可以看|网站前端程序制作开发

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>
<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
赞(0)
64K

评论 抢沙发

评论前必须登录!