How to create tray shaped bottom border like Android input?

问题

In one of the custom input I created in js file for an application using Phonegap, we need to have exact border as it was resulting in normal input in Android devices.

So the question is how to create shaped boarder using css exact looking app for custom inputs which are not getting this by default.

回答1:

Use this solution

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>

回答2:

To achieve this we can use outline and border combination. We need a bigger outline then the boarder on left and right and just as long as we need size of the tray shape. So basically an outline which is transparent work as a mask to get needed shape.

I make them colored as green outline and rad border to for better understanding.

The resulting css looks like this.

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

If you have any other ways to achieve it. kindly post it.

来源：https://stackoverflow.com/questions/53954644/how-to-create-tray-shaped-bottom-border-like-android-input