How to target a specific element with Custom CSS - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
May 15, 2018 at 11:34 am #956910
bakbek
Participant
Hi, I gave a contact form on my site the custom class of “contactform” and I want to make all the field placeholders white.

I used this code but it didn’t work. What did I do wrong?
```
#contactform ::-webkit-input-placeholder {
  color: #ffffff !important;;
}
#contactform ::-moz-placeholder { 
  color: #ffffff !important;;
}
#contactform :-ms-input-placeholder { 
  color: #ffffff !important;;
}
#contactform :-moz-placeholder { 
  color: #ffffff !important;;
}
```
May 15, 2018 at 12:05 pm #956920
Guenni007
Participant
first of all – i don’t know if two semicolons at the end will come into conflict.
try this first.

second: you have no browser plattform for firefox and consorten :
and think of opacity for firefox – because it has set this to 0.8
```
::placeholder { 
    color: #fff !important;
    opacity: 1; 
}
```
_______________________

by the way:
you can change / add placeholder text (even if you have not choosen that option on enfold dialog with that here on functions.php of child-theme
Change it to your page-id
```
function change_placehoder_txt() {
if( is_page(2604) ) {
?>
<script type="text/javascript">
  jQuery('#avia_1_1').attr('placeholder', '  Anything you like*');
  jQuery('#avia_2_1').attr('placeholder', '  Anything you like*');
 </script>
<?php
}
}
add_action('wp_footer', 'change_placehoder_txt');
```
The easiest way to get distance to the Input field is to insert spaces on the text.
May 15, 2018 at 12:18 pm #956925

bakbek
Participant

I don’t want to use Page.ID

I want to use the custom CSS class I added to the element.

Not sure I understand how your code helps me do what I want.

May 15, 2018 at 12:21 pm #956927
Guenni007
Participant
this is what is enough for modern browser:
```
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white !important;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: white !important;
}
```
May 15, 2018 at 12:24 pm #956931

Guenni007
Participant

that is an additonal information and separated with a separator
it is to individualize the placeholder text
you can see here the effect: https://webers-testseite.de/kontakt/

by the way:
you can change / add placeholder text (even if you have not choosen that option on enfold dialog with that here on

May 15, 2018 at 12:24 pm #956935

bakbek
Participant

I’m sorry Guenni007 but you’re solutions are not really related to what I was asking and are not giving me the answer I need.

May 15, 2018 at 12:26 pm #956936
Guenni007
Participant
it is hard to help without a link
but first solution was to try get rid of doubled semicolons
second : add rule for firefox and modern browsers – you have all without :
```
#contactform ::placeholder { 
    color: #fff !important;
    opacity: 1; 
}
```
the webkit rule seems to be obsolete since Safari 10
May 15, 2018 at 12:40 pm #956947

bakbek
Participant

It’s still not working after I removed the double semicolons.

May 15, 2018 at 12:49 pm #956955
Guenni007
Participant
it seems enfold had set up a rule with .main-color class so try to be more specific with:
(normaly the ID should overwrite a rule with class don’t know why it does not)
```
.main_color #contactform ::placeholder { 
color: #fff !important;
opacity: 1
}
.main_color  #contactform ::-webkit-input-placeholder {
  color: #fff !important;
}
.main_color  #contactform ::-moz-placeholder { 
  color: #fff !important;
}
.main_color  #contactform :-ms-input-placeholder { 
  color: #fff !important;
}
.main_color  #contactform :-moz-placeholder { 
  color: #fff !important;
}
```
it comes from Enfold Options – Main Content – Secondary font color
May 15, 2018 at 1:02 pm #956962
bakbek
Participant
Didn’t work.

When I use this code:
```
::-webkit-input-placeholder {
  color: #ffffff !important;;
}
::-moz-placeholder { 
  color: #ffffff !important;;
}
:-ms-input-placeholder { 
  color: #ffffff !important;;
}
:-moz-placeholder { 
  color: #ffffff !important;;
}
```
It does work but it changes it globally acroress the site and I only want to change the specific element I created the custom CSS class for.
May 15, 2018 at 6:44 pm #957171
Guenni007
Participant
Wait for mods or post your link – i don’t know where your custom ID is.

How many contact forms do you have on that page.
maybe the .page-id-12345 will make it for you.

maybe for not globaly set the rule has to include the input bzw textarea etc tag
```
.main_color  #contactform input::-webkit-input-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform input:-moz-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform input::-moz-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform input:-ms-input-placeholder {
color: #ffffff !important;
}
.main_color  #contactform input::-ms-input-placeholder {
color: #ffffff !important;
}
.main_color  #contactform textarea::-webkit-input-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform textarea:-moz-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform textarea::-moz-placeholder { 
color: #ffffff !important;
}
.main_color  #contactform textarea:-ms-input-placeholder {
color: #ffffff !important;
}
.main_color  #contactform textarea::-ms-input-placeholder {
color: #ffffff !important;
}
```
May 15, 2018 at 10:31 pm #957230

bakbek
Participant

I have it on a number of pages so I prefer to use the custom CSS instead of page ID.

May 17, 2018 at 8:31 am #958000
Ismael
Moderator
Hi,

It’s a custom css CLASS attribute so the css codes should be this one..
```
.contactform ::-webkit-input-placeholder {
  color: #ffffff !important;;
}
.contactform ::-moz-placeholder { 
  color: #ffffff !important;;
}
.contactform :-ms-input-placeholder { 
  color: #ffffff !important;;
}
.contactform :-moz-placeholder { 
  color: #ffffff !important;;
}
```
Best regards,
Ismael
May 17, 2018 at 12:37 pm #958125

bakbek
Participant

Thanks!

May 17, 2018 at 8:35 pm #958331

Guenni007
Participant

thats why i like to see the page.
on source code this will be the easiest way to see that on first view.

May 18, 2018 at 3:59 am #958404

Vinay
Inactive Moderator

Hi,

Thank you @guenni007 for helping out :)

@bakbek Hope your issue is sorted?

Best regards,
Vinay
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.