如何使只读输入的行为类似于带有CSS的div？

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 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;
}

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

在这里工作演示

Answer 3

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

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