如何创建类似Android输入的托盘形底部边框？

Question

在我为使用Phonegap的应用程序在js文件中创建的自定义输入之一中，我们需要具有精确的边框，因为它会导致Android设备中的正常输入。

所以问题是如何使用css外观精确的应用程序创建形状的寄宿生，以获取默认情况下无法获取的自定义输入。

Answer 1

使用此解决方案

input {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1px solid black;

}

.rawp{
    position: relative;
    display: inline-block;
}


.rawp:after {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    left: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

.rawp:before {
    content: "";
    background: black;
    width: 1px;
    height: 10px;
    right: 0;
    bottom: 0;
    z-index: 99;
    position: absolute;
}

<div class="rawp">
  <input></input>
</div>

Answer 2

要实现此目的，我们可以使用轮廓和边框组合。 我们需要一个更大的轮廓，然后是左右两侧的边界，并且只要我们需要托盘形状的大小即可。因此基本上，轮廓是透明的，可以作为蒙版获得所需形状。

我将它们设置为绿色轮廓和弧形边框，以便于更好地理解。

生成的CSS看起来像这样。

outline-width: 4px;
outline-style: solid;
outline-offset: -5px;
border-width: 0 0 5px;
border-style: solid;
outline-color: #fcfcfc;
border-color: rgba(153, 153, 153, 0.5);

如果还有其他方法可以实现。请张贴。