Question

我需要使只读输入看起来或多或少像块级元素。但是，我不想将宽度设置为100％，我需要它的行为就像内容自动调整宽度一样。

CSS：

input:read-only, textarea:read-only {
    border: 0;
    outline:0;
    height: auto;
    text-indent: 0;
    width: auto;
    margin-left: 10px;
    float: left;
    margin-bottom: 7px;
    font-weight: 300;
    display:block;
}

为了清楚说明，我试图使输入行为如下：

<div>
    someone@somelongdomainbecausewhynot.com
</div>

虽然最初的默认浏览器“宽度”已经关闭了。输入字段的输出限制或显示为输入具有溢出设置。我也试过设置溢出，但这也没有用。

我想将此仅限于CSS，我不想在这里使用javascript。

更新的演示：http://jsfiddle.net/hhz17uww/6/

Answer 1

据我了解，您希望input填充容器的宽度，但使用width: 100%并不理想，因为父级可能有边距或填充。如果是这种情况，请使用：

input:read-only {
  box-sizing: border-box;
  width: 100%;
}

现在输入元素将占用所有可用空间并考虑父节点边距和填充。

有关box-sizing的更多信息，请阅读Paul Irish的帖子box-sizing border-box ftw

Answer 2

此处您可以按照此规则来完成作业。

继承 CSS值会导致指定它的元素从其父元素中获取属性的计算值。它是允许每个CSS属性。对于继承的属性，这个强化默认行为，只需要覆盖另一条规则。

<div class="wrapper">
<input type="email" name="email" class="emailField"  readonly="readonly" value="someone@somelongdomainbecausewhynot.com" />
</div>
<p>someone@somelongdomainbecausewhynot.com</p>


input:read-only {
    border: 0;
    width: inherit;
    display:block;
    margin: 1.12em 0 ;
  font-size: 100%;
    font: inherit;
}

这将继承父元素<div> width，Any我们需要如何自定义Parent的宽度。

Working Demo Here

Answer 3

由于您使用的是不存在的伪选择器，因此未应用您的样式：:read-only。您可以使用类名或其他选择器。这是使用.emailField更新的小提琴。

http://jsfiddle.net/hhz17uww/4/

如何使readonly输入表现得像css的div？

3 个答案: