Question

我正在尝试使用右侧角落的图像创建一个简单的表单输入字段，图像作为提交按钮。这是我的演示http://jsfiddle.net/BSXsY/ 我希望输入字段中的图像类（.button）。谢谢你的帮助。

Answer 1

对于astrik放置在输入字段内，您需要添加类。

以下是代码：

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

该课程的各个CSS：

.astrik
{
     background-image: url('../images/red_asterik.png');
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-position: right;
     background-position-x: 98%;
}

Answer 2

通过改变两件事，我很确定我已经完成了你的要求：

.searchinput {
    color: #666666;
    font-size: 13px;
    padding-left: 2px;
    top: 5px;
    width: 200px;

    /* Additions (or rather copies) */
    background: url("http://img696.imageshack.us/img696/8137/13133747.jpg") right no-repeat;
    height: 25px;
}

请注意，更改高度以适应图像，可能需要使用文本大小/对齐方式。

将图像放在表单输入字段中

2 个答案: