Как скрыть глаза от ввода пароля в MS Edge и IE - PullRequest
Новая
       93

Как скрыть глаза от ввода пароля в MS Edge и IE

1 голос
/ 27 апреля 2020

Теперь я нашел ответ: он просто работает, когда я добавляю display: none !important;. Я не знаю, что именно блокирует display: none;, но если у кого-то еще есть эта ошибка, попробуйте добавить !important и убедитесь, что ввод является паролем.

Оригинальный вопрос:

У меня есть ввод пароля с пользовательской добавленной кнопкой «показать пароль». Теперь я хочу удалить кнопку пароля, добавленную MS Edge и IE. Я уже пробовал: 

input[type=password]::-ms-reveal, input[type=password]::-ms-clear {
    display: none;
}

и 

input::-ms-reveal, input::-ms-clear {
    display: none;
}

::ms-clear работает и удаляет маленький x, где пользователь может очистить ввод. Но ::ms-reveal не работает. Протестировано в IE 11, MS Edge на основе хрома и новейшей MS Edge, не основанной на хроме.

MS Edge, на основе хрома , IE 11

Глаз справа - это мой добавленный глаз, другой - глаз, добавленный IE или Edge.

Вот мой стиль ввода: 

/*
BASIC INPUT STYLING
*/

input, textarea, select {
    outline: none;
    border-radius: 6px;
    box-sizing: border-box;
    box-shadow: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    color: #222222;
    background-color: transparent;
    border: 1px solid #CCCCCC;
    padding: 18px 22.5px;
    transition: border-color .15s ease-in-out;
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    border: 1px solid #999999;
}

.input-small input, .input-small select, .input-small textarea {
    font-size: 14px;
    padding: 9px 11.25px;
}

/*
INPUT WITH ICON STYLING
*/

.input-with-icon {
    position: relative;
}

.input-with-icon input, .input-with-icon select {
    padding-right: 62.5px;
}

.input-with-icon.input-small input, .input-with-icon.input-small select {
    padding-right: 32px;
}

.input-icon-div {
    height: 51px;
    border-radius: 6px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    position: absolute;
    right: 5px;
    bottom: 2px;
    cursor: pointer;
}

.input-small .input-icon-div {
    font-size: 14px;
    height: 27px;
    width: 25px;
}

и HTML: 

<div class="input-with-icon">
    <input type="password" name="password" id="password" class="" maxlength="255">
    <div class="input-icon-div">
        <i class="far fa-eye"></i>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

просто убедитесь, что у вас есть тип пароля в качестве пароля или в зависимости от того, что вам нужно, чтобы он был текстовым или числовым. 

Password: <input type="password"  id="myInput"><br><br>


`enter code here`</html>
0 голосов
/ 27 апреля 2020

Я пытался проверить оба кода в устаревшем браузере IE 11, MS Edge, браузере MS Edge Chromium и Firefox.

Он работал на моей стороне и не показывает пароль Reveal. Кнопка (Глаз).

Протестированный код: 

<!DOCTYPE html>
<html>
<head>
<style>
input::-ms-reveal, input::-ms-clear {
    display: none;
}
</style>
</head>
<body>


Password: <input type="password" value="" id="myInput"><br><br>

</body>
</html>

Вывод в браузере IE 11:

enter image description here

Вывод в устаревшем браузере MS Edge :

enter image description here

Вывод в браузере MS Edge Chromium:

enter image description here

Я проверил документацию и нашел эту информацию.

Нестандартный:

Эта функция нестандартная и не соответствует стандарту. Не используйте его на рабочих сайтах, выходящих в Интернет: он не будет работать для каждого пользователя. Также могут быть большие несовместимости между реализациями, и поведение может измениться в будущем.

Совместимость браузера показана только для версии IE 10.

...