css - How to create tray shaped bottom border like Android input?

Question

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.

Answer 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>