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

Question

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
}
}

Answer 1

For some reason form elements are particular and quirky about font.

• Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.

• On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.

• Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).

• This ruleset may help you for Firefox:

   input::-moz-focus-inner {
      border: 0;
      padding: 0;
  
      /* Some users have said these last two are 
         unnecessary or should be -2px */ 
  
      margin-top:0;  
      margin-bottom: 0;
    }
  

Here's some changes I did to your button and search field:

     #zoekknop {....
        ....
        border: 2px double white;
        line-height: 1.65;
        vertical-align: baseline;
      }

      #search-text {
         line-height: 1.75;
         vertical-align: baseline;
         padding: 4px 3px 0;
       }

Review the Snippet below:

#form {
  font: 400 16px/1.4'Verdana';
}
#form .sub {
  font: inherit;
  width: 9ex;
  color: blue;
  border-radius: 5px;
}
#form .sub:hover {
  color: cyan;
  background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#zoekform {
  height: 29px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 9px;
  font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
  
  color: white;
  font-size: 18px;
  box-sizing: border-box;
  background-color: #446666;
  color: white;
  
  border: 2px double white;
  line-height: 1.65;
  vertical-align: baseline;

}
#search-text {
  line-height: 1.75;
  vertical-align: baseline;
  padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

<form id="form" name="form">
  <input type="submit" class="sub" value="Submit" />
</form>

<form id="zoekform">
  <input type="text" class="" id="search-text" name="search-text" placeholder="Search">
  
    <input id="zoekknop" type="submit" method="GET" value="Search!" />
  
</form>

Answer 2

This should work
#buttonID{
  width: 500px;
  height: 500px;
  padding-bottom: 100px;//pushes text up inside the button
}

Answer 3

Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.

Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.