Применять фильтр css только к тексту внутри поля ввода? - PullRequest
Новая
       30

Применять фильтр css только к тексту внутри поля ввода?

0 голосов
/ 04 мая 2020

Я имею в виду только текст, набранный пользователем. Например, при попытке использовать падающую тень это происходит: no desc

Редактировать: 

filter: drop-shadow(10px 5px 0 #16a861);

https://codepen.io/krozshardt/pen/bGVaVVP

Извините, мне было неясно, когда я впервые задал свой вопрос. Мне сложно объяснить мою цель, но я все же попробую. Как видно на скриншоте и в коде ручки, свойство фильтра css применяется к полю ввода, а не к самому тексту. В этом случае он будет работать с использованием text-shadow, но для каждого фильтра такого решения нет, например, hue-rotate.

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Вы можете установить тень текста с помощью свойства CSS:

Пример: 

.input-classname {
    text-shadow: 3px 3px rgba(0, 0, 0, 0.6);
}

Источник: https://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Редактировать

Я бы также посоветовал использовать более старые методы, которые имеют лучшую поддержку в разных браузерах, если это возможно, конечно. Свойство filter также довольно «новое» (для земли браузера) и не работает во всех версиях браузера или может иметь свои причуды. Для поддержки и более подробной информации я бы порекомендовал MDN (очень хороший источник для вашего кода) и caniuse.com

Кроме того, браузеры немного ограничивают ваши стили для поля формы (кнопки, входы и т. д. c.). Вы должны сбросить эти ИЛИ вы должны прибегнуть к другим изменениям.

0 голосов
/ 04 мая 2020

Это действительно зависит от того, что вы пытаетесь применить к тексту. Если вы пытаетесь изменить font-family в текстовом вводе, то это должно работать: 

<!DOCTYPE HTML>
<HTML>
<head>
    <style>

        body {
            font-family: Verdana
        }

        .input {
            font-family: cursive;
        }

    </style>
<body>

    <form action="javascript:void(0)" class="form-container">

            <input type="text" class="input"></input>

    </form>

</body>
</html>

Обратите внимание, что CSS применяет фильтр к самому вводу, но он изменил текст. Если вы пытаетесь применить другой фильтр к тексту, но не можете сделать это, применяя фильтр к входным данным, тогда в коде могут быть небольшие изменения: 


<!DOCTYPE HTML>
<HTML>
<head>
    <style>

        body {
            font-family: Verdana
        }

        .inputText {
            filter: drop-shadow(8px 8px 10px gray);
        }

    </style>
<body>

    <form action="javascript:void(0)" class="form-container">

            <input type="text"><span class="inputText"></span></input>

    </form>
</body>
</html>

Обратите внимание на Приведенный выше код дал тексту класс, добавив вокруг него <span> элементов. Я очень надеюсь, что это сработает, а может и нет. 8-летний может ошибиться тут и там ...:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...