Удаление контура с кнопки CSS - PullRequest
Новая
       76

Удаление контура с кнопки CSS

0 голосов
/ 20 июня 2020

В настоящее время мои кнопки в раскрывающемся меню показывают черный контур вокруг каждой из кнопок (как на картинке), но я пытаюсь удалить их, чтобы кнопки выглядели более интегрированными с фоном (или, альтернативно, сделать контур белым ) так что вы не можете его увидеть. Это мой текущий html код 

   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Social</input>
   <input type="button" className = 'profiletype' name="profile_type" value={name} onClick={submit}>Professional</input>

, а это мой CSS код для типа профиля 

  .profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
}

, и я прикрепил изображение того, как он сейчас выглядит. Спасибо !:

текущее изображение

1 Ответ

0 голосов
/ 20 июня 2020

Об этом начертании - это стиль по умолчанию для input type="button", применяемый браузером. Чтобы исправить это, вы можете объявить свой собственный стиль границы. Например: border:1px solid blue;

.profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
  border:1px solid blue;
}
<input type="button" class = 'profiletype' name="profile_type" value='Professional' />
 <input type="button" class = 'profiletype' name="profile_type" value='Social' />
...