tips03-placeholder 属性

主要是要处理兼容性问题
input::-webkit-input-placeholder{ color:red; font-size:14px; }
input:-moz-placeholder{ color:red; font-size:14px;}
input::-moz-placeholder{ color:red;font-size:14px; }
input:-ms-input-placeholder{ color:red; font-size:14px; }

转载于:https://www.cnblogs.com/noraZhang/p/10121590.html

<template> <view class="template-login"> <view class="login"> <!-- 顶部背景图片--> <view class="login__bg login__bg--top"> <image class="bg" src="/static/login_top2.jpg" mode="widthFix"></image> </view> <view class="login__wrapper"> <view class="tn-margin-left tn-margin-right tn-text-bold tn-text-center tn-color-indigo" style="font-size: 100rpx;"> 安博源 </view><view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"> <!-- 验证码登录 --> <block v-if="currentModeIndex === 0"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> </block> <!-- 注册 --> <block v-if="currentModeIndex === 1"> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-phone"></view> </view> <view class="login__info__item__input__content"> <input v-model="phoneNumber" maxlength="20" placeholder-class="input-placeholder" placeholder="请输入手机号" /> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-safe"></view> </view> <view class="login__info__item__input__content login__info__item__input__content--verify-code"> <input v-model="verifyCode" placeholder-class="input-placeholder" placeholder="请输入验证码" /> </view> <view class="login__info__item__input__right-verify-code" @tap.stop="getCode"> <tn-button size="sm" backgroundColor="#01BEFF" fontColor="#FFFFFF" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button> </view> </view> <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left"> <view class="login__info__item__input__left-icon"> <view class="tn-icon-lock"></view> </view> <view class="login__info__item__input__content"> <input v-model="password" :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" /> </view> <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword"> <view :class="[showPassword ? &#39;tn-icon-eye&#39; : &#39;tn-icon-eye-hide&#39;]"></view> </view> </view> </block>
03-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值