样式化输入文本 CSS答案

【问题标题】：Styling input text CSS样式化输入文本 CSS
【发布时间】：2011-08-23 06:11:50
【问题描述】：

我正在尝试创建如下图所示的输入文本：

首先，我在 this fiddle 之类的帮助下使用了 CSS3。由于旧浏览器的问题，我不使用 CSS3。现在我这样编码：

input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
        background-image: url('Pictures/Input-BG.png');
    background-repeat: repeat-x;

}
   <input id="txtScrictAddress" value="Your Adress (required)" type="text" />

Input-BG.png 是这张图片：

和here 是结果。

我对输入图像进行了正确的切片吗？
输入有左边框颜色，css中的输入应该如何像图片一样设置样式？

【问题讨论】：

图片不错，加border: 0;禁用默认边框样式。
@Kapap 谢谢，输入左侧的阴影怎么样？

标签： css

【解决方案1】：

您只需将边框半径和边框设置为无。并编辑您的图像，使黑暗的东西也在左侧。

input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
    background-image: url('http://i.stack.imgur.com/pbpVI.png');
    background-repeat: repeat-x;
    border-radius: 5px; /*up to date browsers support this, but you can add prefixes if you want*/

    border: 0;
}

http://jsfiddle.net/TGzng/8/

【讨论】：

谢谢。它似乎比我的代码好，但我认为您的示例与我放置的 Image 仍然存在细微差别。我指的是 Input 左侧的小阴影。
我使用了您提供的图像，需要对图像进行编辑以包含阴影的左侧部分。

【解决方案2】：

如果你想使用图像来获得两端不同的东西，你至少需要 2 张图像来获得它。尝试搜索"sliding doors input css"。也许this topic on SO 可以帮助您（但在in the web 和Stackoverflow 上还有一百万个其他示例）。

【讨论】：

谢谢。所以你的意思是我应该使用两张图片，一张用于左侧，一张用于背景，对吧？

【解决方案3】：

您需要添加边框半径以使边缘变圆。不过，这在 IE8 之前不起作用。

input[type=text]
{
    color: #979797;
    height: 28px;
    padding-left: 10px;
    text-decoration: none;
        background-image: url('http://i.stack.imgur.com/pbpVI.png');
    background-repeat: repeat-x;
    border:1px solid #777;
    border-radius:5px
}

对于图像切片，获取左侧阴影部分的简单方法意味着您需要有一个非常宽的图像作为背景。或者做其他人建议的推拉门。

【讨论】：