Css - 如何在文本框外添加图像（在左侧，但触摸框）

在我的网站上http://goo.gl/ok43H我想在每个白色文本框旁添加一个小的“+”图标（我做了一个我试图在这里实现的样机模型：http://goo.gl/ftRpZ），但我不知道该怎么做。你会有什么建议？非常感谢，Css - 如何在文本框外添加图像（在左侧，但触摸框）

下面是HTML代码：

<div class="presentation-plusbox"> 
<p>Expertise dans l'industrie</p> 
<p>blblablabla</p> 
<p>blabla</p> 
</div>

这里是CSS代码： .presentation-加号方块

{ 
    width: 500px; 
    background-color:#FFFFFF; 
    padding:10px; 
    margin-left:25%; 
    color:#000000; 
    margin-bottom:8px; 
    opacity:0.95; 
    filter:alpha(opacity=95); /* For IE8 and earlier */ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

来源

2012-07-20 Greg

我想你想让图标可点击吗？ – ryuusenshi 2012-07-20 18:10:48

可以使用:before - http://jsfiddle.net/fgRRw/

div:before { 
    content: "+"; 
    height: 30px; 
    width: 30px; 
    text-align: center; 
    line-height: 30px; 
    background: orange; 
    color: #fff; 
    display: block; 
    left: -30px; 
    position: absolute; 
}

只是注意 - :before没有在IE7及以下

来源

2012-07-20 18:18:03

哇，Zoltan，这很好，非常感谢！ – Greg 2012-07-20 18:48:34

看起来不错，尽管+不会出现在旧版浏览器中（如您注意的那样），并且不会呈现为实际的DOM元素，因此它不能交互。 – 2012-07-20 19:01:26

定义你+盒作为.presentation-plusbox内一个div

另请参阅position: relative至.presentation-plusbox

然后将下面的CSS应用到加箱

.plusBox { 
    position: absolute; 
    top: 20px; 
    left: -50px; 
}

当然，你需要调整top和left得到它恰到好处。

来源

2012-07-20 18:11:30

我想我会去这个解决方案http://jsfiddle.net/fgRRw/，但非常感谢您的建议！ – Greg 2012-07-20 18:50:35

我还没有尝试过支持，但应该工作。

p { position: relative; } 
p:after { 
    height: 20px; 
    width: 20px; 
    background-image: url('image.url.goes.here.jpg'); 
    position: absolute; 
    top: 5px; 
    left: -20px; 
}

来源

2012-07-20 18:18:21

我想我会去这个解决方案http://jsfiddle.net/fgRRw/，但非常感谢您的建议！ – Greg 2012-07-20 18:49:39

Css - 如何在文本框外添加图像（在左侧，但触摸框）

回答

相关问题