Текстовое оформление CSS: автоматическое применение подчеркивания ко всем элементам в контейнере - PullRequest
Новая
       30

Текстовое оформление CSS: автоматическое применение подчеркивания ко всем элементам в контейнере

1 голос
/ 23 сентября 2019

Я создаю контейнер, в котором пользователь может одновременно просматривать и регистрироваться и входить в систему <div> с помощью MDBoostrap .Проблема в том, что когда пользователь нажимает на вкладку, вкладка находится в активном классе, а затем я хочу подчеркнуть текст.Поэтому я использовал ниже CSS для моего HTML.Все работает хорошо, как мне нужно, но подчеркивание применяется ко всем элементам в DIV.Может кто-нибудь, пожалуйста, помогите мне в этом.Как убрать это подчеркивание из других элементов.Спасибо 

<html>

<head>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet">
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/js/mdb.min.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css?family=Hind');
        @import url('https://fonts.googleapis.com/css?family=Open+Sans');

        /* for searchbar with logo starts*/
        .input-group.md-form.form-sm.form-2 input {
            border: 1px solid #bdbdbd;
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }

        .input-group.md-form.form-sm.form-2 input.red-border {
            border: 1px solid #ef9a9a;
        }

        .input-group.md-form.form-sm.form-2 input.lime-border {
            border: 1px solid #cddc39;
        }

        .input-group.md-form.form-sm.form-2 input.amber-border {
            border: 1px solid ash;
        }

        /* for searchbar with logo ends*/

        /*for Shapes from https://bennettfeely.com/clippy starts*/

        #firstCard {
            clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);

        }

        #firstCardStart {
            clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

        }

        #lastCardEnds {
            clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
            background-color: red;
        }

        /*for Shapes from https://bennettfeely.com/clippy ends*/

        /*defining custom colors strats*/
        .customred {
            color: #f11523;
        }

        .customBackgroundColorRed {
            background-color: #f11523;
        }

        .custobodycolor {
            background-color: #f5f5f5;
            font-family: 'Open Sans';
        }

        .customenjoy {

            background-color: #ffffff;
        }

        .customBorder1px {

            border: 1px solid #dcdcdc;

        }

        /*defining custom colors ends*/

        /* Defining custom heights starts*/
        .customHeight100 {
            min-height: 100px;
        }

        .customMinHeight90 {
            min-height: 50px;
        }

        /* Defining custom heights starts*/

        /*custom alignments start*/
        .cuctommarginleft30 {
            margin-left: 30%;
        }

        .cuctommarginleft40 {
            margin-left: 40%;
        }

        .customMarginTop38px {
            margin-top: 38px;
        }

        .customMarginBottom38px {
            margin-bottom: 38px;
        }

        /*custom alignments ends*/

        /*Custom font sizes starts*/
        .textSize12px {
            font-size: 12px;
        }

        .textSize10px {
            font-size: 10px;
        }

        .textSize14px {
            font-size: 14px;
        }

        .textSize16px {
            font-size: 16px;
        }

        .textSize22px {
            font-size: 22px;
        }

        .textSize40px {
            font-size: 40px;
        }

        /*Custom font weights starts*/
        .customFontWeight450 {
            font-weight: 450;
        }

        /*Custom font weights ends */
        /*Custom font sizes ends */

        .customWidth50px {
            width: 50px;
        }

        @media (min-width: 768px) {
            .carousel-multi-item-2 .col-md-3 {
                float: left;
                width: 25%;
                max-width: 100%;
            }
        }

        .carousel-multi-item-2 .card img {
            border-radius: 2px;
        }

        .arialroundedmtbold {
            font-family: 'Hind';
            font-size: 16px;
            font-weight: bold;
        }

        #arialroundedmtboldEnjoy {
            font-family: 'Hind';
            font-size: 50px;

        }

        .textMyriadPro {
            font-size: 14px;
            color: #757575;
        }

        .enjoresult {
            font-size: 20px;
            margin-left: 5px;
        }

        #fontsize40 {
            font-size: 140px;
        }

        #borderHover:hover {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 2px 3px 0 rgba(0, 0, 0, 0.10);

        }

        .listgroup {
            font-family: Roboto, sans-serif;
            font-size: 14px;
            color: #757575;
            list-style: none;
            text-decoration: none;
            height: 25px;
            padding-left: 10px;
        }

        .listgroup:hover {
            color: #f2230c;
            background-color: #eceff2;
        }

        .customMarginTop15px {
            margin-top: 15px;
        }

        .customMarginBottom15px {
            margin-bottom: 15px;
        }

        .color000 {
            color: #000;
        }

        .color757575 {
            color: #757575;
        }

        .fontsans {
            font-family: 'Open Sans', sans-serif;
        }

        #hoverHeart:hover {
            color: red;
        }

        .topicFontFamily {
            font-family: Roboto, sans-serif;
        }

        #noBoxShadow {
            box-shadow: none;
        }

        .instacolor {
            color: transparent;
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
            background-clip: text;
            -webkit-background-clip: text;
        }

        .noBoxShadow {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

        .verticalCenter {
            vertical-align: middle;
        }
    </style>


  
</head>

<body>
    <div class="container">
        <div class="row mt-4">
            
            <div class="col-12 card">
                <!-- Nav tabs -->
                <ul class="nav mb-4 mt-4" id="myTabAttr" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="signin-tab-attr" data-toggle="tab" href="#signin-attr" role="tab" aria-controls="signin-attr" aria-selected="true">SIGN IN</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="register-tab-attr" data-toggle="tab" href="#register-attr" role="tab" aria-controls="register-attr" aria-selected="false">REGISTER</a>
                    </li>

                </ul>
                <style>
                    #signin-tab-attr:hover {
                        text-decoration: underline;

                    }

                    .active,
                    #signin-tab-attr:hover {

                        color: red;
                        text-decoration: underline;

                    }

                    #register-tab-attr:hover {
                        text-decoration: underline;
                    }

                    .active,
                    #register-tab-attr:hover {

                        color: red;
                        text-decoration: underline;

                    }
                </style>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!--Sigin starts -->
                    <div class="tab-pane active" id="signin-attr" role="tabpanel" aria-labelledby="signin-tab-attr">
                        <form>

                            <div class="form-group">
                                <input type="text" name="username" class="form-control" placeholder="Username">
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" class="form-control" placeholder="Password">
                            </div>
                            <div class="form-group ">
                                <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                                <label for="remember" style="color: black"> Remember Me</label>
                            </div>

                            <button type="submit" style="" type="button" class="ml-0 mb-3 p-2 btn customBackgroundColorRed text-white btn-lg btn-block  noBoxShadow ">
                                <p class=" text-capitalize textSize16px font-weight-bold m-0">Sign in</p>
                            </button>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="">
                                            <a href="#" tabindex="5" class="forgot-password float-">Forgot Password?</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>


                    </div>
                    <!--Sigin ends -->

                    <!-- Register starts -->
                    <div class="tab-pane" id="register-attr" role="tabpanel" aria-labelledby="register-tab-attr">
                        <div class="tab-pane active" id="signin-attr" role="tabpanel" aria-labelledby="signin-tab-attr">
                            <form>
                                <div class="form-group">
                                    <input type="text" name="email" class="form-control" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="password" name="createPassWord" class="form-control" placeholder="Create password">
                                </div>
                                <div class="form-group">
                                    <input type="password" name="reTypePassword" class="form-control" placeholder="Re-type Password">
                                </div>
                                <div class="form-group pt-1 pb-1 ">
                                    <input type="checkbox" class="" name="iAgree" id="iAgree">
                                    <label for="iAgree " class="textSize12px verticalCenter mt-1" style="color: black">I agree to Surf2Ship <a href="#">Terms and conditions</a> and <a href="#">Privacy Policies</a></label>
                                </div>

                                <button type="submit" style="" type="button" class="ml-0 mb-3 p-2 btn customBackgroundColorRed text-white btn-lg btn-block  noBoxShadow ">
                                    <p class=" text-capitalize textSize16px font-weight-bold m-0">Register</p>
                                </button>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="text-center textSize14px">
                                                <p style="color: black">or connect via</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="text-center verticalCenter">
                                                <a href="" class="pr-4"><i class="fab fa-facebook textSize40px"></i></a>

                                                <a> <img class="ml-4" style="width:35px;height:35px;vertical-align: middle;margin-top: -18;" src="googleicon.png" role="button"></a>

                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </form>
                           


                        </div>
                    </div>
                    <!--Reister ends-->
                </div>
            </div>
        </div>

    </div>

</body></html>

Это оснастка

snap

1 Ответ

4 голосов
/ 23 сентября 2019

Вам нужно применить CSS только к тем элементам, которые в этом нуждаются.Найдите измененный код ниже. 

.nav-link.active,
.nav-link:hover {
  color: red;
  text-decoration: underline;
}


/* for searchbar with logo starts*/

.input-group.md-form.form-sm.form-2 input {
  border: 1px solid #bdbdbd;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.input-group.md-form.form-sm.form-2 input.red-border {
  border: 1px solid #ef9a9a;
}

.input-group.md-form.form-sm.form-2 input.lime-border {
  border: 1px solid #cddc39;
}

.input-group.md-form.form-sm.form-2 input.amber-border {
  border: 1px solid ash;
}


/* for searchbar with logo ends*/


/*for Shapes from https://bennettfeely.com/clippy starts*/

#firstCard {
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}

#firstCardStart {
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

#lastCardEnds {
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%);
  background-color: red;
}


/*for Shapes from https://bennettfeely.com/clippy ends*/


/*defining custom colors strats*/

.customred {
  color: #f11523;
}

.customBackgroundColorRed {
  background-color: #f11523;
}

.custobodycolor {
  background-color: #f5f5f5;
  font-family: 'Open Sans';
}

.customenjoy {
  background-color: #ffffff;
}

.customBorder1px {
  border: 1px solid #dcdcdc;
}


/*defining custom colors ends*/


/* Defining custom heights starts*/

.customHeight100 {
  min-height: 100px;
}

.customMinHeight90 {
  min-height: 50px;
}


/* Defining custom heights starts*/


/*custom alignments start*/

.cuctommarginleft30 {
  margin-left: 30%;
}

.cuctommarginleft40 {
  margin-left: 40%;
}

.customMarginTop38px {
  margin-top: 38px;
}

.customMarginBottom38px {
  margin-bottom: 38px;
}


/*custom alignments ends*/


/*Custom font sizes starts*/

.textSize12px {
  font-size: 12px;
}

.textSize10px {
  font-size: 10px;
}

.textSize14px {
  font-size: 14px;
}

.textSize16px {
  font-size: 16px;
}

.textSize22px {
  font-size: 22px;
}

.textSize40px {
  font-size: 40px;
}


/*Custom font weights starts*/

.customFontWeight450 {
  font-weight: 450;
}


/*Custom font weights ends */


/*Custom font sizes ends */

.customWidth50px {
  width: 50px;
}

@media (min-width: 768px) {
  .carousel-multi-item-2 .col-md-3 {
    float: left;
    width: 25%;
    max-width: 100%;
  }
}

.carousel-multi-item-2 .card img {
  border-radius: 2px;
}

.arialroundedmtbold {
  font-family: 'Hind';
  font-size: 16px;
  font-weight: bold;
}

#arialroundedmtboldEnjoy {
  font-family: 'Hind';
  font-size: 50px;
}

.textMyriadPro {
  font-size: 14px;
  color: #757575;
}

.enjoresult {
  font-size: 20px;
  margin-left: 5px;
}

#fontsize40 {
  font-size: 140px;
}

#borderHover:hover {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10), 0 2px 3px 0 rgba(0, 0, 0, 0.10);
}

.listgroup {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #757575;
  list-style: none;
  text-decoration: none;
  height: 25px;
  padding-left: 10px;
}

.listgroup:hover {
  color: #f2230c;
  background-color: #eceff2;
}

.customMarginTop15px {
  margin-top: 15px;
}

.customMarginBottom15px {
  margin-bottom: 15px;
}

.color000 {
  color: #000;
}

.color757575 {
  color: #757575;
}

.fontsans {
  font-family: 'Open Sans', sans-serif;
}

#hoverHeart:hover {
  color: red;
}

.topicFontFamily {
  font-family: Roboto, sans-serif;
}

#noBoxShadow {
  box-shadow: none;
}

.instacolor {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.noBoxShadow {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.verticalCenter {
  vertical-align: middle;
}
<html>

<head>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" rel="stylesheet">
  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/js/mdb.min.js"></script>

  <style>
    @import url('https://fonts.googleapis.com/css?family=Hind');
    @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  </style>



</head>

<body>
  <div class="container">
    <div class="row mt-4">

      <div class="col-12 card">
        <!-- Nav tabs -->
        <ul class="nav mb-4 mt-4" id="myTabAttr" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="signin-tab-attr" data-toggle="tab" href="#signin-attr" role="tab" aria-controls="signin-attr" aria-selected="true">SIGN IN</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="register-tab-attr" data-toggle="tab" href="#register-attr" role="tab" aria-controls="register-attr" aria-selected="false">REGISTER</a>
          </li>

        </ul>
        <style>
          .nav-link.active,
          .nav-link:hover {
            color: red;
            text-decoration: underline;
          }
        </style>

        <!-- Tab panes -->
        <div class="tab-content">
          <!--Sigin starts -->
          <div class="tab-pane active" id="signin-attr" role="tabpanel" aria-labelledby="signin-tab-attr">
            <form>

              <div class="form-group">
                <input type="text" name="username" class="form-control" placeholder="Username">
              </div>
              <div class="form-group">
                <input type="password" name="password" class="form-control" placeholder="Password">
              </div>
              <div class="form-group ">
                <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                <label for="remember" style="color: black"> Remember Me</label>
              </div>

              <button type="submit" style="" type="button" class="ml-0 mb-3 p-2 btn customBackgroundColorRed text-white btn-lg btn-block  noBoxShadow ">
                                <p class=" text-capitalize textSize16px font-weight-bold m-0">Sign in</p>
                            </button>

              <div class="form-group">
                <div class="row">
                  <div class="col-lg-12">
                    <div class="">
                      <a href="#" tabindex="5" class="forgot-password float-">Forgot Password?</a>
                    </div>
                  </div>
                </div>
              </div>

            </form>


          </div>
          <!--Sigin ends -->

          <!-- Register starts -->
          <div class="tab-pane" id="register-attr" role="tabpanel" aria-labelledby="register-tab-attr">
            <div class="tab-pane active" id="signin-attr" role="tabpanel" aria-labelledby="signin-tab-attr">
              <form>
                <div class="form-group">
                  <input type="text" name="email" class="form-control" placeholder="Email">
                </div>
                <div class="form-group">
                  <input type="password" name="createPassWord" class="form-control" placeholder="Create password">
                </div>
                <div class="form-group">
                  <input type="password" name="reTypePassword" class="form-control" placeholder="Re-type Password">
                </div>
                <div class="form-group pt-1 pb-1 ">
                  <input type="checkbox" class="" name="iAgree" id="iAgree">
                  <label for="iAgree " class="textSize12px verticalCenter mt-1" style="color: black">I agree to Surf2Ship <a href="#">Terms and conditions</a> and <a href="#">Privacy Policies</a></label>
                </div>

                <button type="submit" style="" type="button" class="ml-0 mb-3 p-2 btn customBackgroundColorRed text-white btn-lg btn-block  noBoxShadow ">
                                    <p class=" text-capitalize textSize16px font-weight-bold m-0">Register</p>
                                </button>

                <div class="form-group">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="text-center textSize14px">
                        <p style="color: black">or connect via</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="row">
                    <div class="col-lg-12 mb-3">
                      <div class="text-center verticalCenter">
                        <a href="" class="pr-4"><i class="fab fa-facebook textSize40px"></i></a>

                        <a> <img class="ml-4" style="width:35px;height:35px;vertical-align: middle;margin-top: -18;" src="googleicon.png" role="button"></a>

                      </div>
                    </div>
                  </div>
                </div>


              </form>



            </div>
          </div>
          <!--Reister ends-->
        </div>
      </div>
    </div>

  </div>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...