几个实用css小技巧

最新推荐文章于 2024-08-29 14:32:34 发布

只是六号z

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量142

点赞数

分类专栏：前端文章标签： css css3 html

赵小奥的专属文章

本文链接：https://blog.csdn.net/z318913/article/details/125229406

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

几个实用css小技巧

一、元素的高度与 window 的高度相同
二、修改 input placeholder 样式
三、使用 caret-color 来修改光标的颜色

一、元素的高度与 window 的高度相同

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css小技巧</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <div class="app">
            <div class="child"></div>
        </div>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
.child{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(180deg,#2af589 0%,#009efd);
}

效果：
在这里插入图片描述

二、修改 input placeholder 样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css小技巧</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <input type="text" class="placehoder-custom" placeholder="Please enter user name to search">
        <input type="text" placeholder="Please enter user name to search ">
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
input{
    width: 300px;
    height: 30px;
    outline: none;
    display: block;
    margin: 10px;
    border: solid 1px #dee0e9;
    padding: 0 15px;
    border-radius: 15px;
}
.placehoder-custom::-webkit-input-placeholder{
    color: #babbc1;
    font-size: 12px;
}

效果：
在这里插入图片描述

三、使用 caret-color 来修改光标的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css小技巧</title>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <input type="text" class="caret-color" />
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    justify-content: center;
  }
  
.caret-color {
    width: 300px;
    padding: 10px;
    margin-top: 20px;
    border-radius: 10px;
    border: solid 1px #ffd476;
    box-sizing: border-box;
    background-color: transparent;
    outline: none;
    color: #ffd476;
    font-size: 14px;
    /* 改变光标颜色 */
    caret-color: #ffd476;
}
  
/* 改变输入框内输入样式 */
.caret-color::-webkit-input-placeholder {
    color: #4f4c5f;
    font-size: 14px;
}