Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
339 views
in Technique[技术] by (71.8m points)

css - 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.

enter image description here

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...