0

I actually work on a plugin for wordpress and I have problem to dynamically stylize a button form (input[type="submit"]), because some wordpress themes use the "!important" property.

I want to override that use JavaScript under HTML input objects, because i want to call some css value using php.

In the demo below I have volentary put the "!important" property in the css style to try to override it.

DEMO

input[type="submit"] {
    font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display:block;
    background-color: #333333!important;
    color: #FFFFFF!important;
    padding: 5px 11px;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    font-size: 15x;  
    border-radius: 3px;
    box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}

input[type="submit"]:hover {
  background-color: #27ccc0!important;
  color: #FFFFFF!important;
}
<input 
onmouseover="this.style.backgroundColor='#6ce033'; this.style.color='#FFF'; return true;"
onmouseout="this.style.backgroundColor='#40c200'; this.style.color='#FFF'; return true;"
type="submit">

<?php
function add_button($id) {
 
 $stored_meta = get_post_meta($id);
 $btn_bg_color = esc_attr( $stored_meta['btn_bg_color'][0]);
 $btn_txt_color = esc_attr( $stored_meta['btn_txt_color'][0]);
 $hover_btn_bg_color = esc_attr( $stored_meta['hover_btn_bg_color'][0]);
 $hover_btn_txt_color = esc_attr( $stored_meta['hover_btn_txt_color'][0]);
 



echo '<input onmouseover="this.style.backgroundColor='."'".$btn_bg_color."'".'; this.style.color='."'".$btn_txt_color."'".'; return true;"
 onmouseout="this.style.backgroundColor='."'".$hover_btn_bg_color."'".'; this.style.color='."'".$hover_btn_txt_color."'".'; return true;" type="submit">'

?>
}

Above, a concrete example of what I want to do. Changing the style depending the post id.

j08691
  • 204,283
  • 31
  • 260
  • 272
Short Tuto
  • 59
  • 1
  • 8
  • I had already seen this post, but is not exactly that I want. I have updated my question by adding a concrete php example. – Short Tuto Mar 19 '17 at 22:13
  • 1
    But there is no difference between JavaScript added by PHP, and "just" JavaScript. The answers in the other question work equally well. For instance, you can write `echo " – Mr Lister Mar 20 '17 at 07:19
  • If that doesn't work, explain what goes wrong. – Mr Lister Mar 20 '17 at 07:21
  • Its exactly what i did the first time, but the error is i had make two time the "setProperty()" in onmouseover"". The solustion is : . Thanks so much – Short Tuto Mar 20 '17 at 18:59

1 Answers1

0

Since you didn't seem to find which exactly in the previous answer would solve your problem, here's an example implementation.

input[type="submit"] {
    font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display:block;
    background-color: pink!important;
    color: #FFFFFF!important;
    padding: 5px 11px;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    font-size: 15x;  
    border-radius: 3px;
    box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}

input[type="submit"]:hover {
  background-color: red!important;
  color: #FFFFFF!important;
}
<input onmouseover="this.setAttribute('style','background: #6ce033 !important; color: #fff !important;');" onmouseout="this.setAttribute('style','background: #40c200 !important; color: #fff !important;');" type="submit">

There is a bug where the button is initially pink and doesn't change until you mouseover it. You can hack around this by adding a unique id to the input then creating a script right after the input to immediately change the style attribute of the input field.

input[type="submit"] {
    font-family: FontAwesome, 'Diplomata SC', "Helvetica Neue", helvetica, arial, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display:block;
    background-color: pink!important;
    color: #FFFFFF!important;
    padding: 5px 11px;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    font-size: 15x;  
    border-radius: 3px;
    box-shadow: 0 -3px rgba(0, 0, 0, 0.14) inset;
}

input[type="submit"]:hover {
  background-color: red!important;
  color: #FFFFFF!important;
}
<input
  onmouseover="
    this.setAttribute('style',
      'background: #6ce033 !important; color: #fff !important;'
    );"
  onmouseout="
    this.setAttribute('style',
      'background: #40c200 !important; color: #fff !important;'
    );"
  type="submit"
  id="button_ID" />

<script>
  var button = document.getElementById("button_ID");
  button.setAttribute('style',
    'background: #40c200 !important; color: #fff !important;'
  );
</script>

Take note however that both of these solutions are pretty hacky. There are better ways to do things like this, but obviously that is out of this question's scope.

Can't you just add a class to the input?

input[type="submit"].some-override-class {
    background: #40c200 !important;
    color: #fff !important;
}

input[type="submit"].some-override-class:hover {
    background: #6ce033 !important;
    color: #fff !important;
}

The best way to override existing CSS is to further specify its importance using additional classes, IDs, or contexts.

Jerome Indefenzo
  • 967
  • 6
  • 25