CODEWITHSUNDEEP
twitter-bootstrapcss
ps0604
ps0604

Reputation: 1071

Bootstrap: How to obtain plain border in input field?

In this jsfiddle I have an input field, with top and left borders in grey instead of orange (note that the border color is orange). I removed the shadow (in case the grey borders are inner shadows) but that didn't solve the problem. How to get a border that is completely orange?

HTML

<input type="text" value="Some value">

CSS

input[type="text"] {
  border-width: 4px;
  margin: 20px;
  border-color: orange;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}

Upvotes: 3

Views: 823

Answers (3)

Roope
Roope

Reputation: 4507

Set border-style to solid. Currently it is inset.

And to be perfectly clear, this has nothing to do with Bootstrap, I don't see any Bootstrap styles affecting the border style. Rather where this gets set to inset is the browser's own default styles, seen as "user agent stylesheet" in the developer tools.

An example of all possible border styles, courtesy of W3Schools:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

Upvotes: 3

Matthew Campbell
Matthew Campbell

Reputation: 1118

You could try changing border-color to border and have #px solid orange, but that's probably not what you're quite looking for. The orange border problem could just be a browser error. I see a full orange border when on Windows Chrome but not on Mac Chrome.

Upvotes: 0

subbu1191
subbu1191

Reputation: 1

try 

input[type="text"] {
  border: 4px solid orange;
  margin: 20px;
  border-color: orange;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; 
}

Upvotes: 0

Related Questions