検索入力ボタンを絶対に配置したテキスト入力があります...ボタンのスペースを作るために、テキストをボタンの下に移動させないようにするためにパディングを使用しました。これは、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を含めるべきでした...ここにあります:
<!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;
}
お役に立てれば?お知らせ下さい。
それのための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;
}
ムハンマド・アティフ・チュタイ
入力を透明にし、コンテナーdiv内にスタイルを配置します。
http://jsfiddle.net/LRWWH/211/
HTML
<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;
}
border-right
ではなくpadding-right
をお試しください。これでうまくいきました。
パディング/マージンを適用する前に、「#mainPageSearch input」でfloat:left/rightを使用する必要があります。
同様の問題が発生しました-IEは入力フィールドをパディングしていましたが、フィールドを大きくしていなかったため、テキストをその中に押し込みました。入力の高さも設定して修正しました。やってみて。
DOCTYPEの宣言についてはどうですか?
<!DOCTYPE html>
を追加することで、パディングはIE8で私にとって大きな働きをします。例として次のコードを見てください:
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
padding: 10px;
}
</style>
</head>
<body>
<input id="myInput" value="Some text here!" />
</body>
</html>
IE7で次の作業をしています。どのバージョンをターゲットにしていますか?
<style type="text/css">
input#test {
padding: 10px;
}
</style>
<input type="text" id="test" />