在dijit中创建一个搜索框

时间：2013-03-24 23:35:41

标签： html css dojo

http://jsfiddle.net/PRAPc/

我想在文本框的开头呈现一个像this这样的搜索图标，但我无法使用以下内容。请帮忙。

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{

}

1 个答案:

答案 0 :(得分：0)

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

jsFiddle

enter image description here 

.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;
}

或者，您可以将这些样式应用于.searchBox_div内的另一个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;
}
相关问题
最新问题