解决360浏览器中input框字体颜色不变问题

川长思鸟来 2022-06-02 01:11 232阅读 0赞

1. html页面：

<form>
            <div>
                <ul>
                    <li>
                        <input type="text" name="username" placeholder="用户名">
                    </li>
                    <li>
                        <input type="password" name="username" placeholder="密码">
                    </li>
                    <li>
                        <button type="button">登录</button>
                    </li>
                </ul>
            </div>
        </form>

2. 引入jquery.js

<script src="jquery-1.8.3.min.js"></script>

3. 接下来是页面中写入js

var JPlaceHolder = {
        //检测
        _check: function () {
            return 'placeholder' in document.createElement('input');
        },
        //初始化
        init: function () {
            if (!this._check()) {
                this.fix();
            }
        },
        //修复 何问起
        fix: function () {
            jQuery(':input[placeholder]').each(function (index, element) {
                var self = $(this), txt = self.attr('placeholder');
                self.wrap($('<div></div>').css({ position: 'relative', zoom: '1', border: 'none', background: 'none', padding: 'none', margin: 'none' }));
                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');
                var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: pos.left, top: pos.top, height: h, lienHeight: h, paddingLeft: paddingleft, color: '#aaa' }).appendTo(self.parent());
                self.focusin(function (e) {
                    holder.hide();
                }).focusout(function (e) {
                    if (!self.val()) {
                        holder.show();
                    }
                });
                holder.click(function (e) {
                    holder.hide();
                    self.focus();
                });
            });
        }
    };
    //执行 
    jQuery(function () {
        JPlaceHolder.init();
    });

4. 页面展示前后对比

![20171228174520438][]

[20171228174520438]: /images/20220602/cc4f0beef18544c2823dce95f4563ec1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 input自动填充浏览器记住的密码后，去除输入框背景颜色

歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10...

旧城等待，/ 2024年04月17日 05:59/ 0 赞/ 66 阅读

相关微信小程序修改input中的placeholder字体颜色

wxml <input class="search-size" confirm-type="search" value="{ {inputValu

朱雀/ 2023年07月25日 09:29/ 0 赞/ 342 阅读

相关解决input框对不齐的问题

要想解决这个问题，首先你得了解input框了解它的默认样式 input框的默认样式有: 1：获取焦点时的轮廓 outline； 2：2px的border边

布满荆棘的人生/ 2023年07月05日 05:23/ 0 赞/ 52 阅读

相关 input框改变选中后的颜色

以input="type"为例： 1、默认属性，input\{样式\} 2、鼠标悬浮：input:hover\{样式\} 3、点击属性：input:focus\{样

本是古典何须时尚/ 2022年11月15日 03:51/ 0 赞/ 860 阅读

相关 CSS - 改变 input 输入框 placeholder 的字体颜色大小

前言该方法只适用于 `pc` 端，移动端无效。代码 input::-webkit-input-placeholder { / We

小咪咪/ 2022年10月25日 04:49/ 0 赞/ 257 阅读

相关 input输入框外联式样式控制不了字体

1、问题背景在做项目过程中，发现input输入框利用外联样式，控制不了输入框的样式 2、问题原因（1）HTML代码 <!DOCTYPE

待我称王封你为后i/ 2022年06月09日 22:51/ 0 赞/ 152 阅读

相关解决360浏览器中input框字体颜色不变问题

1. html页面： <form> <div> <ul> <li>

川长思鸟来/ 2022年06月02日 01:11/ 0 赞/ 233 阅读

相关解决360浏览器不支持IDM下载的问题

像360安全浏览器和360极速浏览器的设置中，下载工具都只能选择自己。不能选择IDM下载。如图： ![23985231.jpg][] 如何让它们支持IDM下载呢？

爱被打了一巴掌/ 2022年05月12日 03:56/ 0 赞/ 1571 阅读

相关 chrome浏览器输入框变黄解决方法

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill

青旅半醒/ 2021年09月15日 22:34/ 0 赞/ 588 阅读

相关 css - 设置input输入框的placeholder的颜色和字体等样式

兼容多个浏览器的写法： ::-webkit-input-placeholder { /Webkit browsers 谷歌/ color:

逃离我推掉我的手/ 2021年08月13日 11:12/ 0 赞/ 521 阅读