如何在输入值下方创建行并装饰此行

Question

我需要在input中为显示表达式值的文本加上下划线（我制作计算器）。
如果我使用text-decoration: underline，则该行太粗且太靠近文本。

我需要像这样做线。行应仅为文本加下划线，而不是整个输入。

我使用固定width: 200px作为输入（最大值可以是六位数的五位数）。如果我没有设置width输入占用100％的可用位置。因此，我们无法使用border-bottom，因为行有width个输入，但是文字大约有70％的输入width，我们会得到类似.calc__total-cost { font-size: 56px; font-weight: 700; width: 200px; height: 60px; background: transparent; color: #efae02; text-align: right; text-decoration: underline; }的内容 <div class="calc__total"> <input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000"> </div> 3}}

如果可能，我们不应该使用JavaScript，只能使用CSS。

＆＃13;

＆＃13;

@progress

＆＃13;

npm pack @progress/kendo-popup-common

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用height，borders和outline进行游戏：您可以使用白底边框部分重叠使用text-decoration创建的下划线。然后，您可以使用outline属性恢复边框，例如

input { 
   width: 300px; 
   height: 4.1rem;
   text-align: right;
   padding: 0 10px;
   text-decoration: underline; 
   font: 5rem Arial; 
   color: gold; 
   border: 0;
   border-top: 10px #fff solid;
   border-bottom: 10px #fff solid;
   outline: 1px #d8d8d8 solid;
}

<input type="text" value="5000"/>

作为最终结果，只有数字用一条浅色线加下划线（用底部边框调整以调整刻度）

Answer 2

您可以使用以下内容：

＆＃13;

＆＃13;

updateSubmission(event) {
    let updatedSubmission = Object.assign({}, this.state.submission);

    updatedSubmission[event.target.id] = event.target.value;
    this.setState({
        submission: updatedSubmission
    });
}

＆＃13;

.calc__total-cost{
  border: none;
}
.calc__total-cost:active, .calc__total-cost:focus{
  border: none;
  outline: none;
}
.calc__total{
  position: relative;
}
.calc__total:after{
  position: absolute;
  width: 35px;
  height: 1px;
  background: #333;
  content: '';
  left:0;
  bottom: 0;
}

＆＃13;

＆＃13;

＆＃13;