【Css】input输入文本框的样式大全和搜索框实例（图文和完整源码）

敦厚的曹操

已于 2022-05-29 21:51:35 修改

阅读量1.8w

点赞数 12

分类专栏： 5.【css】 4.【html】

于 2022-04-01 16:43:55 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/123901935

版权

input

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

一、默认显示信息

 <input type="text" required="required" placeholder="　请输入金额" name="u"
         onfocus="if(placeholder=='　请输入金额'){placeholder=''}"
         onblur="if(placeholder==''){placeholder='　请输入金额'}"
         v-model:value="UserName">
 </input>

默认信息CSS样式

    /* 默认信息placeholder的颜色和字体 */
    ::-webkit-input-placeholder {
        color: rgb(197, 197, 197);
        font-size: 15px;
    }

二、文本框样式

outline: none; // 获得焦点不显示边框颜色

   input {
        width: 78%;
        height: 35px;
        background-color: rgb(255, 255, 255);
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        margin-top: 5px;
        margin-left: 2%;
        font-size: 16px;
        padding-left: 15px;
        border: 0px;
        color: black;
        outline: none;  // 获得焦点不显示边框颜色
        padding-left: 15px;  
    }

三、搜索框实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息</title>
</head>
<link rel="stylesheet" href="css/body.css">
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">




<style>
    #search {
        width: 100%;
        height: 50px;
        background-color: rgb(248, 248, 248);
        padding-top: 1px;
    }

    #search input {
        width: 78%;
        height: 35px;
        background-color: rgb(255, 255, 255);
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        margin-top: 5px;
        margin-left: 2%;
        font-size: 16px;
        padding-left: 15px;
        border: 0px;
        color: black;
        outline: none;
        padding-left: 15px;  
    }

    /* 默认信息placeholder的颜色和字体 */
    ::-webkit-input-placeholder {
        color: rgb(197, 197, 197);
        font-size: 15px;
    }

    #search button {
        width: 14%;
        height: 37px;
        background-color: rgb(240, 238, 238);
        /* background-color: rgb(3, 20, 152); */
        border: 0px;
        margin-left: -5px;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;
        color: rgb(116, 116, 116);
        font-size: 20px;
        position: relative;
        top: 1px;
    }
</style>

<body>
    <div id="search">
        <input type="text" required="required" placeholder="　请输入搜索信息" name="u"
            onfocus="if(placeholder=='　请输入搜索信息'){placeholder=''}" onblur="if(placeholder==''){placeholder='　请输入搜索信息'}"
            v-model:value="UserName"></input>

        <button>
            <i class="fa fa-search"></i>
        </button>
    </div>

</body>

</html>