形式输入元素的CSS

我想样式的文本输入和按钮像下面的图像：
形式输入元素的CSS

enter image description here

我绑喜欢this。
输出与图片不一样。因为我是新来的CSS。
你能帮我纠正我的代码吗？

2011-08-17 Shahin

您可以在图片中

body {background-color:#636363;} 

input[type=text] 
{ 
    background-color: #BFBDBD; 
    border:solid 1px #BFBDBD; 
    color: #979797; 
    height: 28px; 
    padding-left:10px; 
    width: 191px; 
    box-shadow: 2px 2px 0 #828181 inset; 
} 
input[type=button] 
{ 
    background-color: #1E1E1E; 
    color: #979797; 
    height: 24px; 
    width: 103px; 
    color: #bbbbbb; 
    text-transform:uppercase; 
    box-shadow:-1px 2px #6E6B6A inset; 
} 

input[type=button], input[type=text] 
{ 
    border: 0; 
    border-radius:5px; 
    font-family: Sansation,Arial; 
}

来源

2011-08-17 16:16:24 MikeM

它太好了：]非常感谢。但似乎IE 7,8不支持此代码？对？有没有办法？ – Shahin

正确，IE 7/8不支持这些CSS3样式。正如@Brandon提到的，你可以使用图像来解决这个问题，但是留下这些现代网页设计样式并不是一个坏习惯，并且允许IE 7/8在没有这些样式的情况下正常降级。 – MikeM

再次感谢您。（http://dimox.net/cross-browser-border-radius-rounded-corners/）为我工作（通过改变IE的行为）但另一个问题：如何删除按钮的白色边框你在IE中风格？ – Shahin

您在上一个选择器中出现拼写错误，说inpur而不是input。

此外，您没有称为输入的类，您实际上是针对元素本身。将.input更改为input

要获得圆角效果，请添加边框半径。你最后的CSS声明应该是这样的上述变化

input[type=button], input[type=text] 
{ 
    border-radius: 5px; 
    font-family: Sansation; 
}

来源

2011-08-17 16:02:56 Brandon

感谢您使用border-radius和box-shadow组合的效果。 IE 8,7是否支持边界半径？ – Shahin

@Shaahin，不，他们不需要 – Brandon

那我该如何解决？有什么方法可以编写跨平台支持的代码？ – Shahin

形式输入元素的CSS

回答

相关问题