Сделать цвет первого варианта в форме выбора, и кликабельный шрифт потрясающий - PullRequest
Новая
       0

Сделать цвет первого варианта в форме выбора, и кликабельный шрифт потрясающий

0 голосов
/ 21 сентября 2018

Подскажите, как поменять цвет первого варианта в выделении на серый?(Как выше)

Кроме того, как сделать кликабельный значок, чтобы показать все параметры?Потому что это не работает правильно. 

<div class="form__group form__group-selection">
    <label for="location" class="form__label"><i class="fas fa-map-marker-alt"></i></label>
    <select name="location" id="location" class="form__select">
        <option class="form__select-option" value="selected" selected>Select one option</option>
        <option class="form__select-option" value="polska">Polska</option>
        <option class="form__select-option" value="lotwa">Łotwa </option>
        <option class="form__select-option" value="estonia">Estonia</option>
        <option class="form__select-option" value="anglia">Anglia</option>
        <option class="form__select-option" value="czopki">Czopki</option>
    </select>
</div>

Ссылка: https://codepen.io/direct96/pen/zJbpPZ - Codepen

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Чтобы «Выбрать одну опцию» выглядело серым, вам просто нужно добавить к ней атрибут «отключен».Я не уверен, что вы подразумеваете под «кликабельным значком, чтобы показать все опции», но нет «чистого» способа сделать это, это может быть сделано с некоторыми js, но я не уверен, что это будет работать со всемибраузеры. 

html {
  font-size: 65.2%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  font-size: 1.6rem;
}

.container {
  height: 100%;
  background-image: linear-gradient(to top, #c5eff3 15%, #f59f4d 70%, #bc2029 100%);
}

.form__header {
  padding: 2rem;
  text-align: center;
  color: #efefef;
  letter-spacing: 0.1rem;
  text-shadow: 1px 2px 3px black;
}
.form__box {
  background-color: #f6f6f6;
  padding: 30px;
  width: 70%;
  margin: 0 auto;
  position: relative;
}
.form__box::after {
  content: "";
  position: absolute;
  left: -1rem;
  right: -1rem;
  top: -1rem;
  bottom: -1rem;
  border: 1rem solid rgba(0, 0, 0, 0.2);
}
.form__group {
  border: #c5c5c5 1px solid;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
}
.form__group:not(:last-child) {
  margin-bottom: 2rem;
}
.form__group-selection::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  font-size: 2.5rem;
  color: #c5c5c5;
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
}
.form__label i {
  font-size: 2rem;
  color: #c5c5c5;
  padding: 1rem 1.5rem;
  position: relative;
}
.form__label i::after {
  content: "";
  position: absolute;
  top: 15%;
  right: -1px;
  height: 75%;
  border-right: solid 1px #c5c5c5;
}
.form__input-text {
  width: 100%;
  padding: 0.5rem 2rem;
  background-color: #f6f6f6;
  border: 0px;
  font-family: inherit;
  font-size: 1.4rem;
  transition: all 0.3s ease-out;
}
.form__input-text::placeholder {
  color: #c5c5c5;
}
.form__input-text:focus {
  outline: none;
  border: #6ba81a 2px solid;
  z-index: 1;
}
.form__select {
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2rem;
  background-color: #f6f6f6;
  border: 0px;
  font-family: inherit;
  font-size: 1.4rem;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

  <title>Forms</title>
</head>

<body>
  <div class="container">

    <div class="form">
      <h1 class="form__header">
        Register Form
      </h1>

      <form action="" class="form__box">
        <div class="form__group">
          <label for="username" class="form__label"><i class="fas fa-user-alt"></i></label>
          <input type="text" id="username" placeholder="Username" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="password" class="form__label"><i class="fas fa-lock"></i></label>
          <input type="password" id="password" placeholder="Password" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="password-repeat" class="form__label"><i class="fas fa-lock"></i></label>
          <input type="password" id="password-repeat" placeholder="Confirm Password" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="email" class="form__label"><i class="fas fa-envelope"></i></label>
          <input type="email" id="email" placeholder="Email" class="form__input-text" required>
        </div>
        <div class="form__group form__group-selection">
          <label for="location" class="form__label"><i class="fas fa-map-marker-alt"></i></label>
          <select name="location" id="location" class="form__select">
            <option class="form__select-option" value="selected" selected disabled>Select one option</option>
            <option class="form__select-option" value="polska">Polska</option>
            <option class="form__select-option" value="lotwa">Łotwa </option>
            <option class="form__select-option" value="estonia">Estonia</option>
            <option class="form__select-option" value="anglia">Anglia</option>
            <option class="form__select-option" value="czopki">Czopki</option>
          </select>
        </div>
      </form>

    </div>

    <div style="height: 5000px;"></div>
  </div>
</body>

</html>
0 голосов
/ 21 сентября 2018

Я обновил jsFiddle.Обратите внимание, что я также изменил часть HTML, потому что я думаю, что вы хотите использовать атрибут «disabled» (и из-за этого вам также придется добавить атрибут «selected»). 

<script type="text/javascript">
    function changeMe(sel)
    {
      sel.style.color = "#000";              
    }
</script>
$header-text-color: #efefef;
$form-bgn-color: #f6f6f6;
$form-text-color: #c5c5c5;
$color-input-focus: #6ba81a;

@mixin inputFonts {
  padding: 0.5rem 2rem;
  background-color: $form-bgn-color;
  border: 0px;
  font-family: inherit;
  font-size: 1.4rem;
}

html {
  font-size: 65.2%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
  font-size: 1.6rem;
}

.container {
  height: 100%;
  background-image: linear-gradient(
    to top,
    #c5eff3 15%,
    #f59f4d 70%,
    #bc2029 100%
  );
}

.form {
  &__header {
    padding: 2rem;
    text-align: center;
    color: $header-text-color;
    letter-spacing: 0.1rem;
    text-shadow: 1px 2px 3px black;
  }
  &__box {
    background-color: $form-bgn-color;
    padding: 30px;
    width: 70%;
    margin: 0 auto;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: -1rem;
      right: -1rem;
      top: -1rem;
      bottom: -1rem;

      border: 1rem solid rgba(#000000, 0.2);
    }
  }

  &__group {
    border: $form-text-color 1px solid;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;

    &:not(:last-child) {
      margin-bottom: 2rem;
    }
    &-selection {
      &::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f0d7";
        font-size: 2.5rem;
        color: $form-text-color;
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translateY(-50%);
      }
    }
  }
  &__label {
    i {
      font-size: 2rem;
      color: $form-text-color;
      padding: 1rem 1.5rem;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 15%;
        right: -1px;
        height: 75%;
        border-right: solid 1px $form-text-color;
      }
    }
  }
  &__input-text {
    width: 100%;
    @include inputFonts();

    transition: all 0.3s ease-out;
    &::placeholder {
      color: $form-text-color;
    }
    &:focus {
      outline: none;
      border: $color-input-focus 2px solid;
      z-index: 1;
    }
  }
  &__select {
    -webkit-appearance: none;
    width: 100%;
    @include inputFonts();
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">

  <title>Forms</title>
</head>

<body>
  <div class="container">

    <div class="form">
      <h1 class="form__header">
        Register Form
      </h1>

      <form action="" class="form__box">
        <div class="form__group">
          <label for="username" class="form__label"><i class="fas fa-user-alt"></i></label>
          <input type="text" id="username" placeholder="Username" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="password" class="form__label"><i class="fas fa-lock"></i></label>
          <input type="password" id="password" placeholder="Password" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="password-repeat" class="form__label"><i class="fas fa-lock"></i></label>
          <input type="password" id="password-repeat" placeholder="Confirm Password" class="form__input-text" required>
        </div>
        <div class="form__group">
          <label for="email" class="form__label"><i class="fas fa-envelope"></i></label>
          <input type="email" id="email" placeholder="Email" class="form__input-text" required>
        </div>
        <div class="form__group form__group-selection" onchange="changeMe(this)">
          <label for="location" class="form__label"><i class="fas fa-map-marker-alt"></i></label>
          <select name="location" id="location" class="form__select">
            <option  selected disabled class="form__select-option" value="selected" selected>Select one option</option>
            <option class="form__select-option" value="polska">Polska</option>
            <option class="form__select-option" value="lotwa">Łotwa </option>
            <option class="form__select-option" value="estonia">Estonia</option>
            <option class="form__select-option" value="anglia">Anglia</option>
            <option class="form__select-option" value="czopki">Czopki</option>
          </select>
        </div>
      </form>

    </div>

    <div style="height: 5000px;"></div>
  </div>
</body>

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

Похожие темы

...