Bootstrap 3 - remove underline from modal-dialog

1.9k views Asked by At

I have a modal-dialog that when I hover it always show a underline.

I don't know how to fix this, hope you can help!

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Login</h4>
  </div>
  <div class="modal-body">
    <? include "_inc/widgets/login.php"; ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Sluit</button>
  </div>
</div>

And What I have in login.php page

<!-- Error box -->
<pre class="alert-danger" id="errors" style="display:none;"></pre><!-- End error box -->

<!-- Login Form -->
<form style="display:block;" class="form-group" role="form" id="login" method="post">
  <div class="form-group" id="username-group">
    <label for="username">Gebruikersnaam:</label>
    <input type="username" class="form-control" id="login_username">
  </div>
  <div class="form-group">
    <label for="pwd">Wachtwoord:</label>
    <input type="password" class="form-control" id="login_pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox">Onthoud mij</label>
  </div>
  <button type="submit" class="btn btn-default">Login</button>
  <button style="float:right;" type="button" class="btn btn-info" id="toRegister">Of schrijf in</button>
</form><!-- End Login -->
2

There are 2 answers

1
nikola_wd On

Try adding this css in you css file.

.modal-content {
   text-decoration: none !important;
}

!important should make sure that you get no underline no matter what the state is.

I think this should work.

0
Xena On

This should work

.modal-header {
    border: none;
}