精华内容
下载资源
问答
  • 好看的input框
    2022-06-20 12:49:00
                  <div class="wrap-input100 validate-input m-t-85 m-b-35">
                                <input class="input100" type="text" id="username" name="username" placeholder="用户名">
                                <span class="focus-input100"></span>
                            </div>
    
    /*------------------------------------------------------------------
    [ Input ]*/
    
    .wrap-input100 {
      width: 100%;
      position: relative;
      border-bottom: 2px solid #d9d9d9;
    }
    
    .input100 {
      font-family: Poppins-SemiBold;
      font-size: 16px;
      color: #555555;
      /*line-height: 1.2;*/
    
      display: block;
      width: 100%;
      height: 35px;
      background: transparent;
      padding: 0 5px;
    }
    
    /*---------------------------------------------*/ 
    .focus-input100 {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    
    .focus-input100::before {
      content: "";
      display: block;
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
    
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
    
      background: #7765ff;
    }
    
    .focus-input100::after {
      font-family: Poppins-Medium;
      font-size: 18px;
      color: #999999;
      line-height: 1.2;
    
      content: attr(data-placeholder);
      display: block;
      width: 100%;
      position: absolute;
      top: 15px;
      left: 0px;
      padding-left: 5px;
    
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
    }
    
    .input100:focus + .focus-input100::after {
      top: -20px;
      font-size: 15px;
    }
    
    .input100:focus + .focus-input100::before {
      width: 100%;
    }
    
    .has-val.input100 + .focus-input100::after {
      top: -20px;
      font-size: 15px;
    }
    
    .has-val.input100 + .focus-input100::before {
      width: 100%;
    }
    
    View Code
    .p-t-85 {
                padding-top: 10px;
            }
        
            .p-b-70 {
                padding-bottom: 35px;
            }
        
            .m-t-85 {
                margin-top: 15px;
            }
    更多相关内容
  • 分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...
  • 本文给大家分享的是使用jQuery实现的房HTML5中的一个好看input框好看的下拉列表--datalist,兼容性非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
  • 制作符合用户体验的漂亮的input输入框
  • CSS3实现动态输入框input框特效是一款简洁实用动画切换效果好看的动态输入框效果代码,一共有15款样式供您选择。
  • input标签边框

    万次阅读 2019-06-09 15:22:04
    如何设计一个好看的页面也是很重要的一部分 需要设计一个好看的页面也少不了各式各样的标签 下面我来给大家说一个标签也是页面十分重要的一个标签那就是input input标签有如下几个属性 name属性 该属性用于指定用来...

    在我们做项目的过程中 很大一部分我们都要来设计页面布局
    如何设计一个好看的页面也是很重要的一部分 需要设计一个好看的页面也少不了各式各样的标签 下面我来给大家说一个标签也是页面十分重要的一个标签那就是input

    input标签有如下几个属性

    name属性 该属性用于指定用来保存用户输入文本的变量和名称 定义name属性后WML将根据该属性 为即将输入的文本实体对象与之存储空间 以便接收用户输入

    title属性 该属性用于input元素的标签 通常是位于输入框前的提示信息

    type属性 用于指定文本输入区的类型,有text和password两种选择
    默认值为text 指定的用户可以输入文本 而且输入的文本会同时逐渐响应并显示在浏览器中 如果选择password 则指定用户输入的文本作为密码文本处理 WML程序按文本实体接收输入的数据
    而浏览器上响应用户输入显示时逐渐均为星号(*) 由此起到保密的目的

    value属性 该属性用于指定name属性所定义变量的值 它将显示在输入框中

    这些都是基本属性
    那我们该如何设计一个好看的的input标签呢 我们可以设置input的边框和背景颜色

    不过我们发现了一个问题
    给定一个标签后

    在这里插入图片描述

    我给它设置了一个圆角边框的效果

    在浏览器却有这样一个bug
    在这里插入图片描述

    当我点击输入框的时候
    有一个长方形高亮效果的边框 导致我设置的圆角边框看起来十分难看

    该怎么把它去掉呢?

    其实非常简单

    我们需要给标签加上一个样式
    outline ;none就可以了
    在这里插入图片描述

    这个样式就能成功去掉蓝色高亮的边框

    在这里插入图片描述

    怎么样边框是不是变得好看多了

    展开全文
  • html,input

    普通的input输入框在输入时没有好看的样式,看起来不怎么美观,那么如何给input在输入是添加一个好看的样式呢?

    很简单,不用js就可以,用查css就可以实现

    css:

        #input1:focus{
                    outline: 2px dashed red;
                }

    html:

        <div id="all">
                <input type="text" name="input1" id="input1" value="" placeholder="输入" />
            </div>

    这是没有FOUCS的

     

    这是有fouce的

     outline: 2px dashed red;

    2px是边框的宽度

    dashed是样式

    red就是颜色了

    展开全文
  • 我们做vue项目,一般会封装一些常用的组件,今天我就把我自己封装的搜索分享给大家,样式简洁漂亮,点击搜索,input输入框会自动获取焦点。如下图所示 html部分 <template> <div class="search_box"&...

    我们做vue项目,一般会封装一些常用的组件,今天我就把我自己封装的搜索框分享给大家,样式简洁漂亮,点击搜索,input输入框会自动获取焦点。如下图所示
    在这里插入图片描述
    在这里插入图片描述

    html部分

    <template>
      <div class="search_box">
        <div class="search_btn" @click="onShow" v-if="!isShow">
          <img @click="clickSearch" src="@/assets/images/icon_search.png" />
          <span>搜索</span>
        </div>
        <div class="search_input" v-if="isShow">
          <img @click="clickSearch" src="@/assets/images/icon_search.png" />
          <input
            v-if="isShow"
            v-model="searchKey"
            placeholder="搜索"
            @blur="clickSearch"
            @keyup.13="clickSearch"
            ref="input"
          />
        </div>
        <a v-if="isShow" @click="onShow">取消</a>
      </div>
    </template>
    

    js部分

    <script>
    import { navPage } from "../api/api";
    export default {
      data() {
        return {
          searchKey: "",
          isShow: false,
        };
      },
      methods: {
        onShow() {
          this.isShow = !this.isShow;
          if (this.isShow) {
            //input 自动获取焦点
            this.$nextTick(() => {
              this.$refs.input.focus()
            });
          }
          this.searchKey = "";
          this.clickSearch();
        },
        clickSearch() {
          let param = {
            moduleCode: "xmzl_zxjd",
            keyword: this.searchKey.trim(),
          }; 
          navPage(param).then((res) => {
            if (res.data && res.data.success) {
              let searchData = res.data.responData.part3[0].items;
              // 将多个参数传给父组件
              this.$emit("onSearch", searchData, this.searchKey);
            }  
          });
        },
      },
    };
    </script>
    

    css部分

    <style lang="less" scoped>
    .search_box {
      margin-bottom: 20px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      > a {
        color: #2d6efb;
        font-size: 14px;
        margin-left: 12px;
      }
      .search_input {
        flex: 1;
        height: 36px;
        background: #f7f7f7;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    
        img {
          width: 16px;
          height: 16px;
          margin: 0 12px;
        }
        input {
          flex: 1;
          height: 100%;
          font-size: 14px;
          outline: none;
          background: transparent;
          color: #666;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #999999;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #999999;
        }
        input:-ms-input-placeholder {
          color: #999999;
        }
        input::-webkit-input-placeholder {
          color: #999999;
        }
      }
      .search_btn {
        flex: 1;
        height: 36px;
        background: #f7f7f7;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    
        img {
          width: 16px;
          height: 16px;
          margin: 0 12px;
        }
        span {
          font-size: 16px;
          color: #999999;
        }
      }
    }
    </style>
    

    父组件调用

    <search @onSearch="onSearch"></search>
    
    //获取子组件传过来的值
    onSearch(searchData, searchKey) {  
      this.searchKey = searchKey;
      this.searchData = searchData; 
    },
    
    展开全文
  • 很漂亮又实用的的Input框,支持CSS或者图片两种样式。
  • 这是一组好看的炫酷的单选。一套的表单样式能让表单好看漂亮。动态选择。
  • 方法一:给input添加-webkit-appearance: none;隐藏默认样式。然后添加自己的样式就好了。例如:.radioBox input{-webkit-appearance: none;width: 20px;height: 20px;padding: 0;background-color: #fff;border: 1...
  • 炫酷的input框实现

    2021-06-13 03:15:59
    Divcss5小编给大家介绍一款input框的代码,实现如下:表单.input-field,.input-field *{-webkit-box-sizing: border-box;box-sizing:border-box;}.input-field {position: relative;width: 200px;margin: 20px 50px;}...
  • 自制了两个好看的css3样式,来看看吧~~
  • vue-ip-input vue 2.0的ip输入工具演示用法用法安装npm install vue-ip-input --save CommonJS var VueIpInput = require('vue-ip-input'vue-ip-input vue的ip输入工具2.0演示演示用法安装npm install vue-ip-input...
  • input type="date">输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。 刚开始设置了输入框背景色透明(background-color:transparent;),在iOS上面背景色和边框都没有了,但是在...
  • 一级标题 *#append #prepend 的...常见 el-input文本框 样式* 代码如下: <el-input placeholder="用户名" v-model="row" style="width:300px;margin-left:20px;"> <template #prepend> 资产编号
  • 移动端常用的input框的样式

    千次阅读 2018-08-15 21:59:12
    input{ text-indent: 0; background: transparent; border: 0 none; resize:none; outline:none; /*清除选中效果的默认蓝色边框 */ -webkit-appea...
  • CSS——input默认边框去除

    千次阅读 2019-09-30 17:40:58
    input的默认边框往往不好看,在它的样式表中加上 outline:none; 就行了
  • 问题: 标签选中后出现一个黑框,实在是不太好看 解决: 方法1:给 设置样式 {outline: none} input { outline: none; } 方法2:给 的伪类选择器 :focus 设置样式 {outline:none} input:focus { outline: none; }...
  • 微信小程序——input 搜索样式

    千次阅读 2020-08-26 21:31:46
    input class="search-input" maxlength="10" bindinput="bindKeyInput" placeholder-class="search-placeholder" placeholder="搜索工作名称"/> .wxss文件 .search-input { position: relative; width: 686...
  • border:none;边框会隐藏,但点击输入框会显示。 想要点击不显示,还得加上outline:none; 以下是一个个人觉得漂亮的按钮。 .botton { width: 130px; height: 40px; background: #745A74; ... ...
  • 去掉背景和边框比以前好看多了,但是因为类型是date,所以右边有个图标,感觉不协调,加上appearance:none;样式图标没了,比以前更好看了。下图是效果: jsp 部分代码: " class="imgCen" onclick="updateDate(-1);...
  • 一、默认显示信息 默认信息CSS样式 /* 默认信息placeholder的颜色和字体 */ ::-webkit-input-placeholder { color: rgb(197, 197, 197); font-size: 15px; } 二、文本框样式 outline: none;... } 三、搜索实例 消息
  • 14种CSS3炫酷表单input输入框美化效果

    千次阅读 2021-06-10 15:33:46
    这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插件就是一个很好的例子。这个插件中的效果大多数是使用CSS...
  • 好看的几款搜索

    千次阅读 2021-01-28 10:48:10
    <!... <... <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">...8款纯CSS3搜索</title> <link href="http://cdn.bootcss.co.
  • 单选Radiobox和复选checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的。本文收集了10个相对比较漂亮的美化版单选和复选,希望你会喜欢。 1、...
  • element input搜索探索

    2018-07-08 16:08:00
    转... 在script中添加下面两个函数 //queryString 为在中输入的值 //callback 回调函数,将处理好的数据推回 querySearchAsync(queryString, callback) { var list = [{}...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,282
精华内容 4,112
关键字:

好看的input框