CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AlbaStar
AlbaStar

Reputation: 471

Bootstrap border-radius: 4px is adding shadow to input

I'm making a site with bootstrap, and when I add border-radius: 4px to inputs/buttons, is adding shadow too.

Check image: https://i.sstatic.net/K9pz8.png

How can I remove this shadow?

Upvotes: 2

Views: 794

Answers (2)

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

Try this

#usr{
  border-radius:4px;
}
<div class="col-md-4"><div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr">
    </div>
  </div>

Note: Added class = "form-control".

Demo Here

Upvotes: 2

Suresh Karia
Suresh Karia

Reputation: 18238

Add class="form-control to the input element it will remove shadow inside.

See demo:

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 10px;
}
input {
  border-radius: 5px;
  margin: 10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="input-group">
    <input type="text" class="" placeholder="without class">
    <input type="text" class="form-control" placeholder="with class">
  </div>
</div>

Upvotes: 3

Related Questions