1

http://jsfiddle.net/PRAPc/

我想要在文本框的开头呈现这样的搜索图标，但我无法让以下内容正常工作。请帮忙。

html:

<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" id="myapp" data-maq-appstates="{}">
 <div id="top_bar">
 <div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
 <div class="logo">

 </div>
</a>
<div class="midArea_div">
 <div class="searchBox_div">
   <input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
 </div>
</div>
</div>

</div>
 <div id="top_bar_divider"></div>
 <div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
   <div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
  </div>
 </div>
</body>

js：

require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/form/TextBox"
]);

CSS：

html,body {
    height: 100%;
    width: 100%;
}

 .logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
vertical-align:middle;
}
.logo_a:active{
background-position:0 1px;
}

#top_bar{
    padding:0px; 
    background: -webkit-linear-gradient(#464646, #121212);
    background: -moz-linear-gradient(#464646, #121212);
    background: -ms-linear-gradient(#464646, #121212);
    background: -o-linear-gradient(#464646, #121212);
    background: linear-gradient(#464646, #121212);
    color: #ccc;
    text-shadow:none;
    height:50px;
    width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;

}
.searchBox{
height: 30px;
width: 400px;
padding-left:30px;
font-size:20px;
}
.searchBox_div{
display:inline-block;
verticle-align:middle;
background: #FFF url("http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png") no-repeat scroll 5px 6px;
}
.midArea_div{
margin-left: 100px;
verticle-align:middle;
display:inline-block;
}
.searchIcon{

}
4

1 回答 1

0

您当前的方法不起作用，因为文本框位于其背景之上，因此不可见。您可以使用 on 上的伪元素来执行此操作.searchBox_div（在 <= IE8 中不起作用）。

jsFiddle

在此处输入图像描述

.searchBox_div {
    position:relative;
}
.searchBox_div:before {
    content:"";
    display:block;
    position:absolute;
    background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
    width:24px;
    height:24px;
    left:4px;
    top:50%;
    margin-top:-12px;
    z-index:1;
}

或者，您可以将这些样式应用于内部的另一个 div.searchBox_div以解决 IE8 问题，但代价是更多标记。

jsFiddle

HTML

<div class="midArea_div">
 <div class="searchBox_div">
   <input type="text" data-dojo-type="dijit.form.TextBox" class="searchBox"></input>
   <div class="overlay"></div>
 </div>
</div>

CSS

.searchBox_div {
    position:relative;
}
.overlay {
    position:absolute;
    background: url(http://app.maqetta.org/maqetta/user/CoQ/ws/workspace/project1/search_icon.png) no-repeat center center;
    width:24px;
    height:24px;
    left:4px;
    top:50%;
    margin-top:-12px;
    z-index:1;
}
于 2013-03-25T08:23:56.207 回答