input框设置输入文字换行_【CSS专题】<elinput/>标签设置placeholder属性样式小汇...

1、常规样式，对input标签举例

<el-input v-model="inputValue" placeholder="请输入内容" >el-input><script>export default {  data() {    return {      inputValue: ''    }  }}script>

2、方式一：修改重新定义的样式(在谷歌浏览器中使用)，对input标签举例

"inputValue" placeholder=<script>export default {  data() {    return {      inputValue: ''    }  }}script><style lang="scss">.cust-el-input {  input::placeholder {    color: #a30014;  }}style>

3、方式二：针对不同浏览器的设置方法(注：因为不同浏览器的兼容性不同，所以在写代码方面也会有所差别。)，对input标签举例

"inputValue" placeholder=<script>export default {  data() {    return {      inputValue: ''    }  }}script><style lang="scss">.cust-el-input {  input::-webkit-input-placeholder {    /* 使用webkit内核的浏览器 */    color: #07c160;  }  input:-moz-placeholder {    /* Firefox版本4-18 */    color: #07c160;  }  input::-moz-placeholder {    /* Firefox版本19+ */    color: #07c160;  }  input:-ms-input-placeholder {    /* IE浏览器 */    color: #07c160;  }}style>

4、方式三：针对不同类型的input输入框设置placeholder属性样式(注：其text是相对应html中的text，如果是密码框，那么相对应的就是password。)

"inputValue" placeholder=<script>export default {  data() {    return {      inputValue: ''    }  }}script><style lang="scss">.cust-el-input {  input[type="text"]::-webkit-input-placeholder {    /* 使用webkit内核的浏览器*/    color: #e97f81;  }  input[type="text"]:-moz-placeholder {    /* Firefox版本4-18 */    color: #e97f81;  }  input[type="text"]::-moz-placeholder {    /* Firefox版本19+ */    color: #e97f81;  }  input[type="text"]:-ms-input-placeholder {    /* IE浏览器 */    color: #e97f81;  }}style>

欢迎关注微信公众号