flex flex - 2 days ago 4
CSS Question

how to change bootstrap input text box style to line?

I am working in laravel with bootstarp css. now I need change input text box style to line....
this is My bootstrap input text box

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="control-label">Name</label>
<input type="text" name="name" class="form-control" id="name" value="{{ old('name') ?: '' }}">
@if ($errors->has('name'))
<span class="help-block">{{ $errors->first('name') }}</span>
@endif
</div>


I wrote css file as follow

#input {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
}


line is come but bootstrap input box style is still there. how can remove bootstrap style and make My input box as line

Answer

Try this:

html {
  /* for demo purposes only */
  margin: 2em;
}

input[type="text"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}

input[type="text"]:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="form-group">
  <label for="name" class="control-label">Name</label>
  <input type="text" name="name" class="form-control" id="name" value="test">
</div>

The :focus rule is so that only the underline changes colour when the input control is focused, otherwise you'll still see the default blow 'glow'.