精华内容
下载资源
问答
  • 方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。 ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; font-size: 16px; ...
    /* 这里是设置input获得焦点时的变化 */
        .logincontent input:focus{
            border-bottom: 2px solid #0F996B;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
        }

    二、设置placeholder文字颜色、字号

    方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

    input::-webkit-input-placeholder { /* WebKit browsers */
      color: #999;
      font-size: 16px;
    }
    
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: #999;
      font-size: 16px;
    }
    
    input::-ms-input-placeholder { /* Internet Explorer 10+ */
      color: #999;
      font-size: 16px;
    }   

    方式2:建议使用该方式 如果是在手机客户端webview 只使用-webkit内核方式即可。

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color: #666;
      font-size: 16px;
    }
    
    input::-moz-placeholder, textarea::-moz-placeholder {
      color: #666;
      font-size: 16px;
    }
    
    input::-moz-placeholder, textarea::-moz-placeholder {
      color: #666;
      font-size: 16px;
    }
    
    input::-ms-input-placeholder, textarea::-ms-input-placeholder {
      color: #666;
      font-size: 16px;
    }

     

    展开全文
  • 先来看看实现的效果:(这里按钮登录div被点击会变色) 然后来看看代码实现 <template> <div class="icontent"> <div class="logincontent"> ...

    写的一个简单的vue登录界面
    先来看看实现的效果:(这里按钮登录div被点击会变色)
    这里写图片描述

    然后来看看代码实现

    <template>
        <div class="icontent">
            <div class="logincontent">
                <h3>师生互动-登录</h3>
                <input type="text" v-model="username" placeholder="请输入手机号或邮箱">
                <input type="password" v-model="password" placeholder="请输入密码">
                <div class="loginb" @click="loginb($event)">Login 登录</div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "login",
            data () {
                return {
                    username: '17012345678',
                    password: '123456'
                }
            },
            methods: {
                loginb(e) {
                    // this.$router.push({ name: 'cousermanager', params: { pagenum: pagenum }})
                    // this.$router.push({ name: 'groupwork'})
                }
            }
        }
    </script>
    
    <style scoped>
        .icontent{
            width: 90%;
            height: 100%;
            margin: 0 5% 0 5%;
            overflow: hidden;
        }
        .logincontent{
            width: 90%;
            height: 100%;
            margin: 50px 5% 0 5%;
            overflow: hidden;
            text-align: center;
        }
        .logincontent input{
            width: 100%;
            height: 35px;
            padding: 3px;
            margin-top: 20px;
            /* 这里是去除掉input的默认样式然后修改为自己的 */
            background:none;  
            outline:none;  
            border:0px;
            /* 这里是修改为自己的样式 */
            border-bottom: 2px solid #dcdcdc;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
            /* 使用怪异盒模型,也可以不使用 */
            box-sizing: border-box;
        }
        /* 这里是设置input获得焦点时的变化 */
        .logincontent input:focus{
            border-bottom: 2px solid #0F996B;
            border-bottom-left-radius: 1px;
            border-bottom-right-radius: 1px;
        }
        /* 为登录div设置样式 */
        .loginb{
            margin-top: 20px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: rgb(7, 187, 127);
            border-radius: 5px;
            font-size: 18px;
            color: #ffffff;
        }
        /* 设置登录div被点击时改变一下背景色 */
        .loginb:active{
            background-color: #0F996B;
        }
    </style>

    注意事项:

    1、:active :focus 获得焦点/被点击后的区别:

    :active,元素被点击时变色,但颜色在点击后消失。

    :focus, 元素被点击后变色,且颜色在点击后不消失。

    2、去除默认的input样式

    background:none; 去除背景
    outline:none; 去除被点击后的默认边框
    border:0px; 去除input自带的边框

    展开全文
  • //input可替换成class input:focus{ box-shadow:0px 0px 10px 0px rgba(127,127,127,0.1); border-color: #FFAD01; }

    //input可替换成class 

    input:focus{
                box-shadow:0px 0px 10px 0px rgba(127,127,127,0.1);
                border-color: #FFAD01;
            }

     

    展开全文
  • 边框默认样式1,和点击之后的样式2 遍历出来数据,要知道选中的下标 声明一个变量,一旦下标和变量相等,则执行样式2 HTML: <template> <view> <view class="wai"> <view class=...

    核心思想:

    边框默认样式1,和点击之后的样式2

    遍历出来数据,要知道选中的下标

    声明一个变量,一旦下标和变量相等,则执行样式2

    HTML:

    <template>
    	<view>
    		<view class="wai">
    			<view class="beixuan" v-for="(item, index) in list" :key="index" @click="dianji(index)" :class="index == active ? 'active' : ''">
    				<text>{{ item.name }}</text>
    			</view>
    		</view>
    	</view>
    </template>

    JS:

    <script>
    export default {
    	data() {
    		return {
    			list: [
    				{
    					name: '第一个'
    				},
    				{
    					name: '第二个'
    				},
    				{
    					name: '第三个'
    				},
    				{
    					name: '第四个'
    				},
    				{
    					name: '第五个'
    				},
    				{
    					name: '第六个'
    				},
    				{
    					name: '第七个'
    				}
    			],
    			active: 0
    		};
    	},
    	methods: {
    		dianji(index) {
    			this.active = index;
    			console.log(this.active);
    		}
    	}
    };
    </script>

    CSS:

    <style scoped>
    .wai {
    	width: 100%;
    	height: 200rpx;
    	margin-top: 200rpx;
    	display: flex;
    	flex-wrap: wrap;
    	text-align: center;
    	line-height: 70rpx;
    }
    .beixuan {
    	height: 80rpx;
    	font-size: 36rpx;
    	padding: 0 30rpx;
    	border: 4rpx solid #dddddd;
    	border-radius: 20rpx;
    	margin: 0 20rpx 20rpx 0;
    	color: #aaa;
    }
    .active {
    	border: 4rpx solid #00ce88;
    	color: #00ce88;
    }
    </style>

    展开全文
  • 1、input 改变光标颜色 input { outline: none; background: none; border: none; text-shadow: 0px 0px 0px #363C54; color: #00bcbc; -webkit-text-fill-color: transparent; } placeholder...
  • 问题的页面展示 解决方案: input{ outline:none } 成功结果
  • 项目中发现火狐浏览器输入框获得鼠标焦点时外边框颜色没有变化,用户体验不好,不能很明显地告诉用户哪个...但是不同浏览器outline属性的默认值不同,如果想要所有浏览器获取焦点时的outline颜色相同,需要在ba...
  • 本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能。分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,...
  • 最近,项目中的网页在测试的时候,发现一个搜索输入框input在360游览器(兼容模式)下显示,在获得焦点时外边框变蓝,而其他FF、IE、Google均未变蓝,现在需要将网页中的所有输入框,都被设计为“获得鼠标焦点时外...
  • input在获得焦点时外边框不变色 input { outline: none; } @ cc
  • 我还去除了input原来的黑色输入框,然后加了下划线 border : none ; border-bottom : 1px solid #000 ; width : 40px ; 去除 input type='number' 的箭头 /* 去除input type="number" 的上下箭头...
  • css属性:outline 可能的值 值描述 none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 ...此效果取决于 outline-col...
  • 去除边框CSS .ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; }
  • $('.pcblogin-inp') ... // 获取值 if (value == '') {// 判断是否是空字符串,而不是null $(this).css('background','#F8F8F8'); return false; }else{ $(this).css('background','#fff'); }; });  
  • 实现"输入框"获得焦点时外边框变蓝

    千次阅读 2017-06-21 08:39:17
    tabindex 属性,然后通过:focus伪类设置父元素div 获得焦点时的border样式。 .dianji:{ border: 1px solid transparent; } .dianji:focus{ border: 1px solid #58a6e7; outline: 0; } 哪
  • 去掉chrome、FF(360 v6.3)input在得到焦点时出现黄色(360 v6.3为蓝色)边框的方法,只需要在input中增加样式outline:0px;即可,如下: input{outline:0px;} 转载于:...
  • Jquery文本框失去和获取焦点变色

    千次阅读 2012-01-10 17:04:15
    body { font: normal 12px/17px Arial; } div { padding: 2px; } input, textarea { width: 12em;
  • <p style="text-align:center"><img alt="" src="https://img-ask.csdnimg.cn/upload/1623484965486.png" /></p> <p style="text-align:center"><img alt="" src=... 求各位大佬帮我看看这怎么改</p>
  • 可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框。 css代码如下: input{outline:none}
  • 获取焦点改变输入框背景色

    千次阅读 2019-11-03 17:10:53
    当输入框获取焦点时(鼠标点到输入框时)为红色,失去焦点时还原(鼠标未点输入框内)为白色。 效果图演示 没有获取焦点 获取焦点 代码演示 <!DOCTYPE html> <html> <head lang="en"> <...
  • 实现输入框得到焦点边框颜色改变失去焦点时输入框变回原来的颜色
  • 改变 input 焦点光标的颜色

    万次阅读 2017-12-25 10:03:12
    改变 input 焦点光标的颜色
  • Android 输入框获取焦点后改变颜色

    千次阅读 2019-01-21 17:05:16
    1.没有获取焦点时的样式 &amp;lt;shape xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:shape=&quot;rectangle&quot;&amp;gt; &amp;lt;corners ...
  • 1、vue 选中或点击输入框,边框高亮 ①:输入框动态绑定一个class,例login-box-focus,如下: :class="{ 'login-box-focus': loginBoxIsTrue }" ②:输入框添加一个聚焦(focus)及失焦(blur)事件,如下: @...
  • 【新建交互】——事件中的【获取焦点】——【设置选 中】 ⑥为文本框Input01添加交互,在文本框失去焦点时,设置选中状态于矩形框1为“False”。 【新建交互】——事件中的【获取焦点】——【设置选 中】 密码框 ...
  • <!... , initial-scale=1.0"> ... <input value="填写您的昵称" onfocus="cls()" onblur="res()"> <input value="填写您的生日(1900-01-01)" onfocus="cls()" onblur="res()"> 亲测,有效。
  • //因为,一个元素,只用插入DOM之后,才能获取焦点 }, inserted:function (el) { //inserted表示元素插入到DOM中的时候,会执行inserted函数(触发一次) //和行为有关的最好放在inserted里面 el.focus() },...
  • 原理:css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用::focus 一:当输入框获得焦点时,改变它的背景色 效果图:当鼠标聚焦时输入内部填充色改变 图片.png <!DOCTYPE html> <html> &...
  • 添加css属性,这样点击时就不会有蓝色边框了   {outline:none;}
  • input框focus时的美化效果

    千次阅读 2017-06-22 10:41:53
    input { border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left: 5px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 459
精华内容 183
关键字:

input获取焦点边框变色