样式输入文本 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7156935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling input text CSS
提问by Shahin
I am trying to create input text like below Image :
First I used CSS3 with some help like thisfiddle . because of problems with old browsers I reached to don't use CSS3.
Now I coded like this :
我正在尝试创建如下图所示的输入文本：
首先，我使用 CSS3 并提供了一些帮助，例如这个fiddle。由于旧浏览器的问题，我决定不使用 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 is this image :
and hereis the result.
输入BG.png是这样的形象：
和这里是结果。
- Did I slice input image right ?
- Input has a left border color , How should style the input in css like the image?
- 我对输入图像进行了切片吗？
- 输入有一个左边框颜色，应该如何像图像一样在 css 中设置输入的样式？
回答by Kyle
You just need to set a border radius and border to none. And edit your image so the dark thing is on the left side also.
您只需要将边框半径和边框设置为无。并编辑您的图像，使黑暗的东西也在左侧。
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;
}
回答by oezi
if you want to use images to get something where both ends differ, you will at least need 2 images to get that. try to search for "sliding doors input css". maybe this topic on SOhelps you out (but there are a million other examples out in the weband on Stackoverflow).
如果你想使用图像来获得两端不同的东西，你至少需要 2 张图像才能得到它。尝试搜索“滑动门输入 css”。也许SO 上的这个主题可以帮助您（但网络和Stackoverflow上还有一百万个其他示例）。
回答by mnsr
You need to add a border-radius to round the edges. This won't work pre-IE8 though.
您需要添加一个边界半径来使边缘变圆。但这在 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
}
As for image slicing, easy way to get the left shadow part means you need to have a very wide image for the background. Or do that sliding doors thing the other person suggested.
至于图像切片，获得左阴影部分的简单方法意味着您需要有一个非常宽的背景图像。或者做其他人建议的推拉门事情。
