我试图在一个看起来不错的表格中获取一些图像,但第三行和第一列有一个空输入。输入图像类型看起来也稍大一些?编辑:我忘了提到这也必须适用于 IE7 及更高版本。
小提琴:http: //jsfiddle.net/486EX/
风格
input {
border: 1px solid black;
}
.emptyicon {
width: 37px;
height: 37px;
float: left;
font-size: 8px;
border: 1px solid grey;
}
.sizewidth {
width: 19px;
height: 10px;
padding: 5px 3px 8px 3px;
margin: 2px;
}
.showborder {
border: 2px solid red;
}
#product {
border: 1px solid #c1c1c1;
}
.sizebtn {
margin: 2px;
height: 31px;
width: 37px;
}
.icons {
width: 213px;
float: left;
padding: 2px;
}
.icons div {
padding: 2px;
float: left;
}
.icons input {
padding: 0;
cursor: pointer;
text-align: center;
background: #FFF;
color: #000;
display: block;
height: 37px;
width: 37px;
line-height: 37px;
font-size: .6em;
overflow: hidden;
}
.sizes {
float: left;
width: 213px;
}
.sizes div {
padding: 2px 0 0 2px;
float: left;
}
.sizes input {
padding: 0;
cursor: pointer;
text-align: center;
background: #FFF;
color: #000;
display: block;
height: 30px;
width: 30px;
font-size: 1.2em;
}
html:
<div id="product">
<table>
<tbody>
<tr>
<td>
<div id="icons_7934" class="icons">
<div>
<input id="imgcolor_7934_Amethyst" text="Amethyst" class="emptyicon showborder" type="button"
value="Amethyst">
</div>
<div>
<input id="imgcolor_7934_Aquamarine" text="Aquamarine" class="emptyicon " type="button"
value="Aquamarine">
</div>
<div>
<input id="imgcolor_7934_Baby_Pink" text="Baby Pink" class="emptyicon " type="button"
value="Baby Pink">
</div>
<div>
<input id="imgcolor_7934_Biscuit" text="Biscuit" class="emptyicon " type="button"
value="Biscuit">
</div>
<div>
<input id="imgcolor_7934_Bisque" text="Bisque" class="emptyicon " type="button" value="Bisque">
</div>
<div>
<input id="imgcolor_7934_Black" src="Images/black.jpg" class="emptyicon " type="image"
value="Black">
</div>
<div>
<input id="imgcolor_7934_Burnt_Orange" text="BurntOrange" class="emptyicon " type="button"
value="BurntOrange">
</div>
<div>
<input id="imgcolor_7934_Candy" text="Candy" class="emptyicon " type="button" value="Candy">
</div>
<div>
<input id="imgcolor_7934_Cherry" text="Cherry" class="emptyicon " type="button" value="Cherry">
</div>
<div>
<input id="imgcolor_7934_Deep_Lilac" text="DeepLilac" class="emptyicon " type="button"
value="DeepLilac">
</div>
<div>
<input id="imgcolor_7934_Dusty_Rose" text="DustyRose" class="emptyicon " type="button"
value="DustyRose">
</div>
<div>
<input id="imgcolor_7934_Iceblue" text="Iceblue" class="emptyicon " type="button"
value="Iceblue">
</div>
<div>
<input id="imgcolor_7934_Lime" text="Lime" class="emptyicon " type="button" value="Lime">
</div>
<div>
<input id="imgcolor_7934_Magenta" text="Magenta" class="emptyicon " type="button"
value="Magenta">
</div>
<div>
<input id="imgcolor_7934_Navy" text="Navy" class="emptyicon " type="button" value="Navy">
</div>
<div>
<input id="imgcolor_7934_Peacock" text="Peacock" class="emptyicon " type="button"
value="Peacock">
</div>
<div>
<input id="imgcolor_7934_Royal_Blue" text="RoyalBlue" class="emptyicon " type="button"
value="RoyalBlue">
</div>
<div>
<input id="imgcolor_7934_Teal" text="Teal" class="emptyicon " type="button" value="Teal">
</div>
<div>
<input id="imgcolor_7934_White" src="Images\White.jpg" class="emptyicon " type="image"
value="White">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script>
$("[id^='imgcolor_7934']").live("click", function () {
$("[id^='imgcolor_7934']").removeClass('showborder');
$(this).addClass("showborder");
});
</script>