找回密码
当前位置：前端开发者 > CSS > 正文

前端开发常用CSS效果 汇总

2018-07-15 16:48:40 分类：CSS 阅读(162) 评论(0)

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

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
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论