How to change the colour of just 1 text input area

you can count the position of your input field and use the :nth-of-type
something like:

#top .main_color input:nth-of-type(1) {
border-color: gray;
background-color: #ffcd26;
color: blue;
}

you can see how it will be used here: https://css-tricks.com/almanac/selectors/n/nth-of-type/

The :nth-of-type selector is very similar to :nth-child but with one critical difference: it is more specific. In our example above they would produce the same result because we are iterating over only li elements, but if we were iterating over a more complex group of siblings, :nth-child would try to match all siblings, not only siblings of the same element type. This reveals the power of :nth-of-type—it targets a particular type of element in an arrangement with relation to similar siblings, not all siblings.

don’t see your homepage

#top.home .main_color input#avia_1_1[type="text"] {
    background-color: #ffcd26 !important;
    border-color: gray;
    color: blue
}

you can try it without important – seems to be selectiv enough

both will work – just add the color for the font to Rikards code

complete the code above with something like this:

#top.home .main_color input#avia_1_1[type="text"] {
    background-color: #ffcd26 !important;
    border-color: gray;
    color: blue;
    background-image: url(https://www.wesellanyautopart.com/wp-content/uploads/2018/02/favi.png);
    background-size: contain;
    background-repeat: no-repeat;
    padding-left: 50px;
}

can you please change the code to https without s – boardsoflt changes to https automatically ????

WHY?

• This reply was modified 6 years, 8 months ago by Guenni007.

well on cf7 this is possible by setting up the form. and use this shortcode

[text your-name placeholder "Your name here"]

here you can try to influence via Child-theme functions.php:

function change_placeholder_txt() {
?>
<script type="text/javascript">
	jQuery('#avia_1_1').attr('placeholder', 'Reg');
 </script>
<?php
}
add_action('wp_footer', 'change_placeholder_txt');

it works with the image too: but i would take the png without the yello background on the right in the image – just the GB only

if you like to have a bit distance on placeholder text just add some spaces – and to be more specific your selector can be more precise

function change_placeholder_txt() {
?>
<script type="text/javascript">
	jQuery('#top.home #avia_1_1').attr('placeholder', '  Enter Reg');
 </script>
<?php
}
add_action('wp_footer', 'change_placeholder_txt');

see results here (with name as placeholder and image): https://webers-testseite.de/kontakt/

PS: on Safari it works too – but the autofill function does not find an input if placeholder text is different to the standard input name

• This reply was modified 6 years, 8 months ago by Guenni007.

once again – i think it is better to alway have the scripts only on those pages where it is needed –
so take this one only for your home page – so we can make the if clause with is_home()
if it is a special page you can have is_page(123) etc
allthough it is just a very tiny script – it does not have to be loaded on page where it is not needed

function change_placehoder_txt() {
if( is_home( ) ) {
?>
<script type="text/javascript">
  jQuery('#avia_1_1').attr('placeholder', '  Enter Reg*');
 </script>
<?php
}
}
add_action('wp_footer', 'change_placehoder_txt');