Ball or underline style underline

Question

I have an input field with only a border at the bottom, now I need to create a small line to the left and right of the input. This is a little difficult to describe, so I will use an example:

input { background-color: transparent; height: 20px; padding: 10px 10px 1px; border: 0; border-bottom: 1px solid red; } 

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

Fiddle

This is what I have:

This is what I need to look like this:

Answer 1

Using multiple box-shadows in the input, you can get this underline 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" /> 

The spread radius and X / Y offset in the sbox shadow must be adjusted according to the input height, as you can see in this example with a higher input:

 input { height:20px; padding:10px 5px; border: 0; box-shadow: -18px 18px 0px -17px red, 18px 18px 0px -17px red; width:300px; } 

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

Browser support for box-shadows is IE9 + .

Answer 2

You can do this with :after and :before pseudo-elements.

 .field { display: inline-block; position: relative; } input { background-color: transparent; padding: 3px 5px; border: 0; border-bottom: 2px solid red; } .field:before, .field:after { content: ""; position: absolute; height: 7px; bottom: 0; background: red; width: 2px; } .field:before { left: 0; } .field:after { right: 0; } 

 <div class="field"> <input type="text" placeholder="Example"> </div> 

Answer 3

The way to create a sensitive form of underlining a bowl that does not need to be modified, regardless of the addition that is applied to the element, is to use linear-gradient as the background image. They can be assigned background-size values ​​in pixel values ​​and located at the bottom of the element.

The approach itself is pretty simple:

• We use border-bottom 1px thick to create the bottom border.
• A linear gradient that is red for 2px and transparent for the rest is added to the element and placed at the bottom of the element.
• The background-size parameter determines the height of the left and right borders. In the snippet, I set the background size to 100% 5px , and so 5px will be the fixed height of the left and right borders. Their height can be increased by decreasing by changing only this parameter.
• background-repeat set so that the background image repeats along the x-axis and setting a negative offset of 1px for the background-position , we guarantee that only 1px of the red border of the 1st gradient tile is displayed on the left. Since we have repeat-x on, and the background size is only 100%, the second fragment along the x axis will start from 1px to the end on the very right, and therefore this will create a 1px border on the right side.

Note. The shadow box has an advantage over this approach in terms of browser support. This is only IE10 +.

 input { background-color: transparent; height: 20px; width: 300px; padding:10px 5px; border: 0; border-bottom: 1px solid red; background-image: linear-gradient(to right, red 2px, transparent 2px); background-repeat: repeat-x; background-size: 100% 10px; background-position: -1px 100%; } input:nth-child(2) { padding: 0 5px; } input:nth-child(3) { padding: 10px 10px 1px; } input:nth-child(4) { height: 20px; padding: 10px 10px 1px; } 

 <!-- prefix free library is optional and is only to avoid browser prefixing --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <input type="text" placeholder="Example"> <br/> <input type="text" placeholder="Example2"> <br/> <input type="text" placeholder="Example3"> <br/> <input type="text" placeholder="Example4">