Рабочий способ изменения цвета поля ввода Input, Placeholder & Auto-Complete

@BARMALEY1337 · Регистрация: 25.05.2015

Author24 — интернет-сервис помощи студентам

Буду краток.
И так.. в первом шаблоне находятся стандартные CSS настройки поля ввода input которые можно в последующем изменить;
Ну а для ленивых я сделал второй небольшой PHP скрипт-шаблон, в котором нужно просто изменить значения в первом массиве $inputString;

Шаблон CSS (стандартный)

Кликните здесь для просмотра всего текста

CSS

::-webkit-input-placeholder {
background-color: #fff;
color: #000000
}
 
::-moz-placeholder {
background-color: #fff;
color: #000000
}
 
:-ms-input-placeholder {
background-color: #fff;
color: #000000
}
 
:-moz-placeholder {
background-color: #fff;
color: #000000
}
 
input:-webkit-autofill {
-webkit-box-shadow: inset 0 0 0 50px #000000 !important;
-webkit-text-fill-color: #fff !important;
color: #fff !important;
}
 
INPUT[type="text"] {
/* outline: none; - Отключает голубой контур вокруг поля ввода */
font: 15px bold arial;
background-color: #fff;
color: #000000
}

Шаблон PHP (очень большой)

Кликните здесь для просмотра всего текста

PHP

<?PHP
$inputString = array(
    'get' => array(
        'background' => '#2E2E2E', /* (цвет) Фон(а) */
        'background-color' => '#2E2E2E',  /* Цвет фона*/
        'color' => '#088A4B', /* Цвет текста */
        'outline' => 'none', /* Обводка вокруг input (!!! Касается AutoComplete !!!)*/
        'font' => '15px bold arial', /* Настройка шрифта */
    ),
);
 
$inputPattern = array(
    'get' => array(
        'pattern' => '
        <!DOCTYPE html>
        <html>
        <head>
            <meta http-equiv="cleartype" content="on">
            <title> Fully customizable Input </title>
        <style type="text/css">
        
            ::-webkit-input-placeholder {
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
            
            ::-moz-placeholder {
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
            
            :-ms-input-placeholder {
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
            
            :-moz-placeholder {
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
            
            input:-webkit-autofill {
            -webkit-box-shadow: inset 0 0 0 50px '.$inputString['get']['background-color'].' !important;
            -webkit-text-fill-color: '.$inputString['get']['color'].' !important;
            color: '.$inputString['get']['color'].' !important;
            }
            
            INPUT[type="text"] {
            outline: '.$inputString['get']['outline'].';
            font: '.$inputString['get']['font'].';
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
            
            INPUT[type="password"] {
            outline: '.$inputString['get']['outline'].';
            font: '.$inputString['get']['font'].';
            background-color: '.$inputString['get']['background-color'].';
            color: '.$inputString['get']['color'].';
            }
        </style>
        <head>
        <body>
            <center>
                <div style="margin-top: 200px;">
                    <form action="'.$_SERVER['PHP_SELF'].'" method="post">
                        <input type="text" placeholder="Placeholder" autocomplete="on" required ><br /><br />
                        <input type="password" placeholder="Placeholder" autocomplete="on" required ><br /><br />
                        <input type="submit" name="submit" value="Sign-in" />
                    </form>
                </div>
            </center>
        </body>
        </html>',
    ),
);
 
echo $inputPattern['get']['pattern'];
?>

Дополнительно:
(НЕ РЕКЛАМА)
Ну а для самых ленивых, вот вам сервис, там можно найти как и HEX, RGB так и HSL цветовой код, так же там есть панель цветовой сочетаемости(какие цвета друг к другу подходят)
Ссылка: перейти

@Joey · 04.12.2017, 20:26

Не по теме:

Сообщение от BARMALEY1337

(НЕ РЕКЛАМА)

ой ли

@BARMALEY1337 · 08.12.2017, 16:41 **[ТС]**

Сообщение от Joey

Не по теме:

ой ли

Ну а вдруг.. Модераторы бывают разные

@Joey
	04.12.2017, 20:26 #2
	Не по теме: Сообщение от BARMALEY1337 (НЕ РЕКЛАМА) ой ли 0

@BARMALEY1337 0 / 0 / 0 Регистрация: 25.05.2015 Сообщений: 39
	08.12.2017, 16:41 [ТС]	3
	Сообщение от Joey Не по теме: ой ли Ну а вдруг.. Модераторы бывают разные 0