css带占位符的搜索框,html – 占位符框的CSS(设计时所见即所得)

这是一个“愚蠢”,但希望合法,如果不是特别需要的挑战,一个可以被设计师在任何地方重复使用,我敢肯定,如果可以得到答案.

我正在使用WYSIWYG-ish编辑器(MS Expression Web 4),并且正在尝试生成基于HTML的线框,我打算将其作为实际生产的基础.由于原始/干净HTML是第一目标,我希望有一个占位符模式,我可以指定以下HTML(除了高度,宽度和文本之外别无其他),它应该显示为矩形通过它的“X”和文本(在本例中为“徽标”)出现在底部,或者在文本后面带有白色背景的中间的框：

Logo

我的问题是什么是CSS和最小量的HTML mucking(例如img标签)是实现我想要的？例如,如果使用以下HTML：

Logo

要么

Logo

这在HTML方面是一个可接受的折衷方案,但那么什么是使这个工作的CSS？

我知道我可以使用jQuery来劫持干净的HTML以生成肮脏的HTML来实现我想要做的事情,但我在设计时需要这个.

下面这个虚假的截图是我正在寻找的.我想删除一小块干净的HTML,并可能使用WYSIWYG界面中的锚点来缩放占位符,而标签则保留在中心 – 底部或中间 – 中间.

我的图像是白色的,黑色的X通过它.

我非常怀疑CSS会支持我想要的东西而不会弄乱HTML.但是,我想知道是否有人知道它是否可行.这是我开始使用的,当然这不起作用,因为背景图像不会缩放,文本不会垂直对齐等等..placeholder {

display: inline;

background-image: url('placeholder-xbox.png');

border: 2px solid black;

vertical-align: bottom;

}

所以现在我必须弄清楚要做出什么样的妥协.我讨厌弄乱HTML并且不介意搞乱CSS,因为CSS类是可重用的.

最佳答案 当我想要这样的占位符时,我倾向于做类似的事情：

< div id =“logo”> logo< / div>和#logo {background：#ccc;边框：1px实心红色}.

所以,它看起来像这样：

Logo

.placeholder {

background: #ccc;

border: 1px solid red;

text-align: center

}

需要额外的标记才能将文本放在底部：

Logo

.placeholder {

background: #ccc;

border: 1px solid red;

text-align: center;

position: relative

}

.placeholder span {

position: absolute;

left: 0;

bottom: 0;

width: 100%

}

刚写完这一切之后,我意识到将它修改为你所描述的创作是多么容易;试试这个：

Logo

.placeholder {

background: #ccc;

border: 1px solid #000;

text-align: center;

position: relative;

font-weight: bold

}

.placeholder span {

position: absolute;

left: 0;

bottom: 0;

width: 100%

}

.placeholder img {

width: 100%;

height: 100%

}