CSS: Styling an input element's text (as opposed to the input element itself)?

EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.

I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.

Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.

I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.

The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.

Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?

Of course, other solutions (preferably CSS only) are welcome as well.

Code:

HTML:

<form id="zoekform">
   <input type="text" class=""  id="search-text" name="search-text" placeholder="Search"> 
   <div class="erom" id="erom2">
      <input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
   </div>
</form>

CSS:

#zoekform {
    height: 29px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 9px;
 }

 .erom {
   height: 100%;
   display: inline-block;
   box-sizing: border-box;
}

   #erom2 {
      border: solid 1px #452F5D;
      width: 27%;
      display: inline-block;
      box-sizing: border-box;
   }

   #zoekknop {
      float: right;
      height: 100%;
      color: white;
      font-size: 19px;
      box-sizing: border-box;
      background-color: #446666;
      color: white;
      letter-spacing: 2px;
      border: solid 1px white;
      width: 100%;
    }

And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):

@-moz-document url-prefix() { 
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}