代码之家 › 专栏 › 技术社区 › mpen

在文本区域上浮动一个跨度?

css html

mpen · 技术社区 · 14 年前

HTML:

<div class="no-contact-info">
    <textarea></textarea>
    <span>no contact info</span>
</div>

CSS:

.no-contact-info {
    width: 400px;
}

.no-contact-info textarea {
    width: 100%;
    border-width: 1px;
    border-style: solid;

    border-right-color: #dbdfe6;
    border-bottom-color: #e3e9ef;
    border-left-color: #e7e8ed;
    border-top-color: #abadb3;    

    z-index: 2;
}

.no-contact-info span {
    display: block;
    background:#FFFFC6 url(/media/icons/error.png) no-repeat 4px center;

    padding: 2px 0 1px 24px;

    color: #333333;
    font-size: 12px;
    font-weight: bold;

    border: 1px solid #abadb3;
    border-top-color: red;
    width: 200px;
    margin-top: -3px;
    z-index: 1;


    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-right-radius: 4px;
}

观点: http://jsfiddle.net/XurSz/

我想把“无联系信息”的范围稍微向上推,这样它就覆盖了文本区域的底部边界…但是文本区一直想要超越。我怎么能避开这个?