Question

请不要我不熟悉CSS 我正在开发一个个人项目，我有两个包含文本框的列。这些文本框是使用背景图像定制的这非常有效。

但是当我调整浏览器大小时，texbox会相互重叠。重叠时，我想要调整texbox的大小;当达到最小宽度时，我想将texbox放在彼此之下我可以用纯CSS做到这一点吗？如果是这样，我怎样才能改变我写的内容以达到这个目标呢？

（哦，顺便说一下，我需要兼容IE8 +，不需要支持IE6也不需要7）。谢谢！

这是一个JsFiddle，以便更好地理解问题，并查看我到目前为止编写的代码。

我认为问题来自

width: 278px;

但是我尝试使用%并且它没有解决问题（你可以试试）谢谢你的帮助

Answer 1

由于您用于背景的图像宽度，如果输入的宽度与图像相同，则可以正常工作。 FIDDLE

input[type=text],input[type=password]{
   border:none;
   background:url('http://i.stack.imgur.com/FPaoD.png') no-repeat top left;
   font: 14px 'Segoe UI','Arial',sans-serif;
   color: #888;
   outline:none;
   height: 48px;
   margin: 0 auto 10px;
   padding: 0 10px 0 50px;
   /* set width to image width */
   width: 338px;
}

如果您希望它们具有响应能力，我建议使用CSS设置样式。

CSS - 如何在调整浏览器大小时使用背景图像调整文本框的大小？

1 个答案: