在 IE 中填充文本输入......可能吗?
-
03-07-2019 - |
题
我有一个文本输入,其上有一个绝对定位的搜索按钮......为了给按钮腾出空间,我使用了一些填充来防止文本进入按钮下方,这很好,它可以在 Firefox 中使用,但不能在 IE 中使用。
实际上...在 IE 中,文本输入的填充似乎根本不起作用。
他们有以下代码
<style type="text/css">
#mainPageSearch input {
width: 162px;
padding: 2px 20px 2px 2px;
margin: 0;
font-size: 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#F3F3F3 url(form-shadow.png) repeat-x scroll left top;
border-color:#C6C6C6 #C6C6C6 #E3E3E3;
border-style:solid;
border-width:1px;
color:#666666;
}
#mainPageSearch {
margin-bottom: 10px;
position: relative; /* Lets me absolute position the button */
}
#mainPageSearchButton {
display: block;
position: absolute;
top:0px;
right: -2px;
text-indent: -2000em;
height: 22px;
width: 22px;
background: transparent url('images/searchBtn.png') top center no-repeat;
}
</style>
<form id="mainPageSearch" action="">
<input type="text"/>
<a id="mainPageSearchButton" href="#">Search</a>
</form>
我想做的事情是可能的还是我应该忍住并处理搜索按钮下的文本?
我知道我可以制作一个具有透明背景/边框的搜索框,并使用包含的 div 绘制样式...但这并不是一个真正的选择,因为我必须在网站上的很多地方更改它。
也许我会为此文本输入创建一个新类,使其透明并将普通文本输入样式分配给包含的 div?你怎么认为?
编辑: :抱歉,我应该包含文档类型...这里是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
另外,我遇到的问题是在 IE 7 中
解决方案
尝试使用行高
其他提示
我也遇到了这个问题,我通过添加以下行解决了它
input
{
overflow:visible;
padding:5px;
}
希望这可以帮助?让我知道。
尝试 border-right
代替 padding-right
. 。这对我有用。
使您的输入透明并将样式放置在容器 div 内:
http://jsfiddle.net/LRWWH/211/
超文本标记语言
<div class="input-container">
<input type="text" class="input-transparent" name="fullname">
</div>
CSS
.input-container {
background:red;
overflow:hidden;
height: 26px;
margin-top:3px;
padding:6px 10px 0px;
width: 200px;
}
.input-transparent {
background-color:transparent;
border:none;
overflow:hidden;
color:#FFFFF;
width: 200px;
outline:none;
}
只有 css 可以解决这个问题
div.search input[type="text"] {
width: 110px;
margin: 0;
background-position: 0px -7px;
text-indent:0;
padding:0 15px 0 15px;
}
/*ie9*/ div.search input[type="text"] {
border-left: 25px solid transparent;
}
/*ie8*/ div.search input[type="text"] {
border-left: 25px solid transparent;
background-position-x: -16px;
padding-left: 0px;
line-height: 2.5em;
}
谢谢穆罕默德atif chughtai
你必须使用浮动:在“#mainPageSearch 输入”上向左/向右,然后才能应用填充/边距。
我遇到了类似的问题 - IE 正在填充输入字段,但没有使其变大,从而将文本向下推入其中。我还通过设置输入的高度来修复它。尝试一下。
我在 IE7 中工作如下。您的目标版本是什么?
<style type="text/css">
input#test {
padding: 10px;
}
</style>
<input type="text" id="test" />
声明 DOCTYPE 怎么样?
通过增加 <!DOCTYPE html>
填充在 IE8 中对我来说非常有用。以下面的代码为例:
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
padding: 10px;
}
</style>
</head>
<body>
<input id="myInput" value="Some text here!" />
</body>
</html>
不隶属于 StackOverflow