表单输入和同一行

我想创建搜索栏提交按钮，现在这是它的外观在所有浏览器，除了铬表单输入和同一行

enter image description here

这是它的外观镀铬：

enter image description here

这里是我的CSS：

#search_input{ 
-moz-border-bottom-colors: none; 
-moz-border-image: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
border-color: #DEDEDE; 
border-style: solid none solid solid; 
border-width: 1px medium 1px 1px; 
height:25px; 
padding-left:3px; 
} 


#search_submit { 
position: relative; 
right: 4px; 
top: 8px; 
}

而且HTML：

<form action="#"> 
    <input id="search_input" type="text" name="search" /> 
    <input id="search_submit" type="image" src="../media/images/search_button.jpg" /> 
</form>

对不起，这么长的帖子我只是想明确一点，反正我要如何解决这个问题镀铬？

EDIT这里是按钮http://shinigami.cd.lt/media/images/search_button.jpg

输入由CSS不使用的图像来完成。

来源

2012-01-08 Linas

你能发布的形象呢？ 'search_button.jpg'，用于测试目的？这是开始的基本小提琴：http://jsfiddle.net/BJJ38/ – 2012-01-08 11:47:38

你可以把这些图像按钮放在网上的某个地方（或者更好地提供[jsfiddle]（http://jsfiddle.net/）上的整个例子）或者[cssdesk]（http://cssdesk.com/）） – 2012-01-08 11:48:50

你的图像的大小是错误的。

你的形象的高度必须是：

<height of input> + <padding of input> + <border of input> 
= 25 + 0 + 2x1 = 27px

修正CSS可以在这里找到（适用于调试目的变焦）： http://jsfiddle.net/BJJ38/2/

要确保输入要素看预计，您必须明确定义padding-top和-bottom属性。你padding-left合并，下面的属性都显示：

padding: 0 0 0 3px;

此外，你必须定义一个宽度一致的外观。例如：

width: 50px;

另一种方法是将按键输入字段内，并延长了右填充，从而使焦点轮廓看起来更好：http://jsfiddle.net/BJJ38/3/

来源

2012-01-08 12:01:51

我现在没有时间来测试您的解决方案，但我希望它能够正常工作，谢谢 – Linas 2012-01-08 15:37:11

您可以快速浏览一下JSFiddles。 – 2012-01-08 15:38:17

表单输入和同一行

回答

相关问题