css - 使输入字段透明

Question

我想采用标准输入字段并使其看起来更好。因此，我将此图像用作页面上的输入字段：

要在我的页面上使用它，我使用以下代码：

HTML：

<input type="text" class="inputstyle" />

CSS

.inputstyle {
padding:7px 10px 5px 10px;
width:251px;
height: 38px;
background: url('images/form_smaller.png') no-repeat 0 center;
border:0;
font-size:14px;
}

当输入字段在白色背景上时，这不是问题。但是我在浅绿色背景上有输入字段，它使输入字段看起来像这样：

我的问题是：如何删除原始输入字段的角以使其看起来很棒？

Answer 1

要回答您的实际问题，您只需将图像设为透明 gif 或 png。Photoshop 会很容易地做到这一点，只需删除背景层，确保您的输入有背景，然后使用文件 > 保存为网络和设备保存。

但是，我不建议将输入替换为背景图像。一个简单的边框半径将在所有现代浏览器上完成这项工作。