CSS:为输入元素的文本设置样式(与输入元素本身相反)吗? [英] CSS: Styling an input element's text (as opposed to the input element itself)?

问题描述

我在该问题的底部添加了以下相关代码.正如您将在此处看到的那样，该按钮包含在div中.另外，此问题仅会在一个浏览器(即Firefox)中发生，并且我将使用一种黑客工具仅将该浏览器作为目标.

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.

我有一个 submit 类型的输入元素(即基本上是一个提交按钮).元素的 value 属性中定义的此元素中显示的文本显得太小(即，太靠近按钮底部而不是垂直居中).按钮的高度固定.

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.

自然，我想将 value 属性中定义的按钮的文本向上移动一两个像素.

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.

但是，问题是，我需要定位文本本身，而不是输入/按钮元素.那当然是因为按钮本身应该停留在当前位置，所以我只想移动按钮上显示的TEXT.

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.

因此，我的问题是:在CSS中，有没有一种方法可以将按钮而不是按钮的显示文本(如 value 属性中所定义的)定位?

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) ?

当然，也欢迎使用其他解决方案(最好仅使用CSS).

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

代码:

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

最后，我仅以Firefox为目标，并且无法进行填充的部分(并且可以肯定的是，媒体查询"(实际上不是媒体查询))可以正常工作，并且在任何情况下在没有媒体查询的情况下，我也尝试过这种情况，即作为常规CSS的一部分)

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

推荐答案

出于某种原因，表单元素是特殊的，并且与字体有关.

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

• 为< submit> 的父代分配一种字体，然后在< submit> 上使用 font:Inheritance >按钮.

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

在< submit> 上，将 1.4 的 line-height 分配给 2 (注意实际上没有像 px 或 em 这样的单位.)实际上，我是通过继承< form>字体来分配 line-height 的. 1.4 .

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.

使用 ex 度量单位设置 width .一个 ex 的宽度与一个 x 字符的宽度一样，使其成为一种衡量与文本相关的空间的好方法.我将 9ex 用作6个字符的单词(即Submit).

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).

此规则集可能对Firefox有帮助:

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

查看下面的代码段:

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

这篇关于CSS:为输入元素的文本设置样式(与输入元素本身相反)吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！