html - 强制输入元素的宽度调整为其内容/值

Question

我正在尝试取消输入元素的样式，使其文本看起来像纯文本/内联文本，并且我已经重置了它可以拥有的几乎所有 css 属性，但我无法让输入的宽度调整/缩小到它内容（input { width:auto; min-width:0; }不起作用）。它遵循任意宽度，例如input { width: 10px; }，因此显然它的宽度是可调节的。

我看到人们试图用javascript来做（答案中的小提琴不再起作用），所以我想知道我想要的是否可能。

这是一个小提琴。

Answer 1

玩过这个。做不到。你想达到什么目的？你知道contenteditable属性吗？

这可能会为您提供所需的东西。

https://developer.mozilla.org/en-US/docs/HTML/Content_Editable

Answer 2

如果您只是避免整个样式混乱并进行一些文本改组怎么办？您已经拥有了 jQuery 所需的一切。

http://jsfiddle.net/2fQgY/8/

The date is <span class="dateSpoof"></span><input class="myDate" type="hidden" value="foo" />. 
Thanks for coming.

$('.myDate').datepicker({
    showOn: 'button',
    buttonText: 'select...',
    onClose: function () {
        var dateText = $(this).val();
        $('.dateSpoof').html(dateText);
        $('.ui-datepicker-trigger').hide();
    },
    dateFormat: 'd M yy'
});

这是一个可重置的示例：http: //jsfiddle.net/2fQgY/11

这是一个全是文本，只有文本：http: //jsfiddle.net/2fQgY/14