Question

也许这是一个奇怪的问题，但是是否有可能将输入字段的右下角装饰成具有两条窄线，这是textarea字段中的默认值？因此，这仅与装饰有关，不需要相同的功能。

input {
      border-top: none;
      border-left: none;
      border-right: none;
    }

<input type="text" placeholder="Input text">
    
<textarea name="" id="" cols="30" rows="10"></textarea>

Answer 1

.resizable-input {
    /* make resizable */
    overflow-x: hidden;
    resize: horizontal;
    display: inline-block;

    /* no extra spaces */
    padding: 0;
    margin: 0;
    white-space: nowrap;
  
    /* default widths */
    width: 10em;
    min-width: 2em;
    max-width: 30em;
}

/* let <input> assume the size of the wrapper */
.resizable-input > input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* add a visible handle */
.resizable-input > span {
    display: inline-block;
    vertical-align: bottom;
    margin-left: -16px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAJUlEQVR4AcXJRwEAIBAAIPuXxgiOW3xZYzi1Q3Nqh+bUDk1yD9sQaUG/4ehuEAAAAABJRU5ErkJggg==");
    cursor: ew-resize;
}

<span class="resizable-input"><input type="text" /><span>

也许这可以帮助！：）

用类似于textarea的样式装饰输入字段

1 个答案: