Input with Border for Half Height

Input with border for half height

Maybe this could be an elegant solution.

If you use background then you can specify really nicely where what goes and it improves readability a bit.

input[type="text"] {  padding: 10px;
  background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);  background-size: 1px 20%, 100% 1px, 1px 20%;  background-position: bottom left, bottom center, bottom right;  background-repeat: no-repeat;
  border: none;  color: #999;}

<input type="text" />

how to give input border left and right small length

Here you go. I had to add a div element outside the input field to use the before and after selectors.

.field {  position: relative;  display: inline-block;}.solid {  border: none;  border-bottom: 2px solid #000;  padding: 5px;}.solid:focus {  outline: none;}.field::after {  content: '';  width: 2px;  height: 10px;  position: absolute;  background: #000;  bottom: 0;  right: 0;}.field::before {  content: '';  width: 2px;  height: 10px;  position: absolute;  background: #000;  bottom: 0;  left: 0;  z-index: 1;}

<div class="field">  <input class="solid" type="text"></div>

Input border has half gray color

Just set border-style: solid!

.wrapper {
  width: 200px;
  height: 25px;
}

.circleInput {
  border-width: 2px;
  border-color: rgb(230,230,230);
  outline-width: 0;
  border-style: solid;
  border-radius: 3.5vh;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 1.0vw;
  background-color: white;
  -webkit-appearance: none;
}

<div class="wrapper">
  <input class="circleInput" type="text" />
</div>

Bowl-style underline or border on input

Using multiple box-shadows on the input can let you have this underlining effect:

input {  height:20px;  padding:0 5px;  border: 0;    box-shadow: -9px 9px 0px -7px red, 9px 9px 0px -7px red;  width:300px;}

<input placeholder="Example" type="text" />

Border Height on CSS

No, there isn't. The border will always be as tall as the element.

You can achieve the same effect by wrapping the contents of the cell in a <span>, and applying height/border styles to that. Or by drawing a short vertical line in an 1 pixel wide PNG which is the correct height, and applying it as a background to the cell:

background:url(line.png) bottom right no-repeat;

css border-left 50% height

Good question. It's not possible using the border property.

The only thing that comes to mind, if you can set your div's position to relative, is to use an absolutely positioned, 1 pixel wide div. Not thoroughly tested but this should work:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
            background-color: blue; overflow: hidden'>
  
</div>

You'd do the same on the right hand side, replacing the left property by right.

Remember, the surrounding div needs to be position: relative for this to work. I'm not sure about whether the 50% height setting will work consistently throughout browsers - make sure you test it. You may have to resort to pixel measures if it doesn't.

CSS: Set border to half width

Can you throw an <hr> at the bottom of your box?

<div class="box">
    ...
    <hr>
</div>

.box{
    width:500px;
}

.box hr{
    width: 300px;
    border-bottom: 1px solid #ccc;
}

http://jsfiddle.net/MuAKF/

---

Related Topics