CSS问题 - 透明下划线文本框 - 如何？答案

【问题标题】：CSS question - transparent underlined textbox - howto?CSS问题 - 透明下划线文本框 - 如何？
【发布时间】：2009-07-31 15:11:53
【问题描述】：

早安，

快速 CSS 问题。有谁知道任何快速的CSS来制作带下划线的透明文本框？我基本上希望文本框除了底部边框之外是不可见的。我需要它正常工作。我是否只删除左、右和上边框并将其背景设置为透明或其他？有关如何正确完成此操作的任何示例？如果相关，此应用适用于 IE7。任何帮助都将不胜感激。

干杯， ~ck 在圣地亚哥

【问题讨论】：

标签： css textbox styles

【解决方案1】：

应该这样做：

input.myBox
{
    border: 0px solid #000000;
    border-bottom-width: 1px;
    background-color: transparent;
}

在 IE8 中测试（IE7 兼容模式）

【讨论】：

【解决方案2】：

只是一个建议...由于人们不会习惯这一点，您可能还需要添加一个悬停伪类，以便在用户将鼠标悬停在字段上时稍微改变颜色，作为正在发生的事情的额外视觉“提示”。

例子：

input.myBox:hover
{
   border-color: #000066;
   background-color: #FFFFF7;
}

【讨论】：

好消息。查看维基百科中的最小惊讶规则以获取更多详细信息。

【解决方案3】：

尝试将左、右和上边框值设置为none

#textarea {
    font-size: large;
    letter-spacing: 2px;
    height: 20px;
    border: 2px solid gray;
    padding:10px,20px;
    width: 50%;
    overflow: hidden;
    resize: vertical;
    min-height: 30px;
    line-height: 20px;
    outline: none;
    border-top:none;
    border-left: none;
    border-right: none;
  }

 &lt;textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="Your message here.."&gt;&lt;/textarea&gt;

【讨论】：