字体颜色不符合 CSS 中为文本区域和选择框指定的样式

发布于 2024-12-14 10:13:23 字数 766 浏览 1 评论 0原文

我正在尝试在我的网页中设置网络表单的样式，该表单有几个文本框、文本区域和一个选择下拉列表。我很难设计文本区域的样式并选择下拉菜单；文本框看起来符合预期。

对于textarea框，我使用了css，例如：

textarea{
font-size:0.9em;
color:#6da021;
border:1px solid #6da021;
width:300px; height:50px;
padding-left:10px;
font-family: tahoma, sans-serif;
}

我还尝试在textarea html中放置一个id，然后使用上面的样式，例如：

<textarea type="text" rows="5" cols="30" name="details" id="details"></textarea>

在这两种方式中，边框属性都已成功应用。但这两种方式都不起作用的是 - 文本区域框中文本的颜色，而且字体看起来与文本框中看到的略有不同，文本框中使用相同的“字体系列：tahoma，sans-serif;” CSS。

同样，对于选择框样式，尽管边框属性正确显示，并且第一个值（最初显示的值，无需用户单击下拉箭头）的字体颜色也正确显示。但是，当用户单击下拉箭头时，所有值都会以默认颜色显示（而不是专门用于 select 的 css 的颜色）。

这是某种已知的问题，还是我错过了更多的样式？我发现这个问题是跨浏览器（IE/firefox 等..）看到的，

谢谢！

原文

I'm trying to style a webform in my webpage, and the form has couple of textboxes, textarea and a select dropdown. I'm having hard time styling the text area and select dropdown; textboxes are looking as expected.

For the textarea box, i used css like:

textarea{
font-size:0.9em;
color:#6da021;
border:1px solid #6da021;
width:300px; height:50px;
padding-left:10px;
font-family: tahoma, sans-serif;
}

I also tried putting an id in the textarea html and then using the above styling like:

<textarea type="text" rows="5" cols="30" name="details" id="details"></textarea>

In both ways, the border properties were applied successfully. But what did not work in both ways are - color of text inside the textarea box, and also the font looks slightly different from what is seen in the text boxes, which use the same "font-family: tahoma, sans-serif;" css.

Similarly, for the select box styling, although the border properties are coming around properly, and that the font color of the first value - the value that is shown initially, without the user having to click on the dropdown arrow - is also displayed correctly. But when the user clicks on the dropdown arrow, all the values are then shown in the default color (not the color that was specifically used for the css of select).

Is it some kind of a known problem, or am i missing out on some more styling? I see that the issue is seen across browsers (IE/firefox etc..)

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

南街女流氓 2024-12-21 10:13:24

哇，我很晚才看到这个，但这是解决字体大小问题的答案

 body{
  font-size:15px;
  font-family: tahoma, sans-serif;
 }

 textarea{
  font-family: inherit;
  font-size: inherit;
 }

Wow I am very late to see this but here is an answer to fix the font size issues

 body{
  font-size:15px;
  font-family: tahoma, sans-serif;
 }

 textarea{
  font-family: inherit;
  font-size: inherit;
 }

回复收藏 0 原文

以歌曲疗慰 2024-12-21 10:13:24

不需要在文本区域中输入 type='text' 。您使用的是 id='details' 和 name='details' 这是同一件事（2 个 ids' 参考）。我建议使用名为“details”的类进行样式设置，并使用 id='content' 来稍后提取文本（如果需要）。

 .details {
     font-family: 'Tahoma', sans-serif;
     font-size: 13px;
     color:#6da021;
     border:1px solid #6da021; 
     width:300px; height:50px;
     padding-left:10px;
    }

No need for type='text' into the textarea. You're using id='details' and name='details' which is the same thing (2 ids' reference). I suggest using a class named details for the styling and an id='content' to extract the text later, if needed.

<textarea rows="5" cols="30" class="details" id='content' value="initial-Text"></textarea>

 .details {
     font-family: 'Tahoma', sans-serif;
     font-size: 13px;
     color:#6da021;
     border:1px solid #6da021; 
     width:300px; height:50px;
     padding-left:10px;
    }

回复收藏 0 原文