CSS在一侧使用边框，在末端附近没有相同的宽度吗？

Question

Hi I am tring to implement something like below screenshot...

Here is what i am using

border-left: 5px solid #7AC0DA;

and it gives me this output

The border is not crisp enough, as you can see in this screenshot the border does not have same width near the ends. How do I correct this ?

Answer 1

This is because the element has a border of 1px solid grey already, and the blue has to expand.

Your best best would be to not use border styles on the input , but something like the following:

HTML

<label class="highlight clearfix">
  <span>Field name:</span>
  <input />
</label>

CSS

label span, label input { float: left }
label.highlight span { border-right: 5px solid blue }

Answer 2

The border shows a bevel because the top and bottom have widths. You can do what you need using the pseudo-element :before

http://jsfiddle.net/sEWqW/3/

<label><input /></label>

CSS

label {
    border: 1px solid #ccc;
    border-left:0;
    padding:.1em .3em;
    position:relative;
}
label:before {
    display:block;
    content:".";
    color:transparent;
    font-size:0;
    border-left:5px solid #f24495;
    height:100%;
    position:absolute;
    left:0;
    padding:1px 0;
    top:-1px;
    bottom:-1px;
}
label input{
    border:0;
}

Answer 3

I'm assuming that somewhere, there is a border-width for your border-top and bottom. I see that you set a border only on left with border-left. Maybe you should try first to set border:0 and than in the same selector, use border-left.