Removing outline from CSS button

Question

Currently my buttons in a drop down menu are showing a black outline around each of the buttons (as pictured), but I am trying to remove them so that the buttons look more integrated with the background (or alternatively make the outline white) so that you can't see it. This is my current html code

   <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>

and this is my CSS code for profiletype

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

and I've attached an image of what it currently looks like. Thanks!:

current image

`className = 'profiletype'` should just be `class="profiletype"` but that may not get rid of the border which may be a style set on all `input`. You may have to add `border: none;` to your `.profiletype` — MilkyTech, Jun 20 '20 at 00:28
I think your answer can be found here - if that does not work we can look at other options for you - https://stackoverflow.com/questions/11497094/remove-border-from-buttons — Lewis Lockhart, Jun 20 '20 at 00:30
@ChrisL I originally had it as class but in my console log I was getting an "invalid DOM proper 'class'. Did you mean 'className'?" error so I changed it to className and the warning disappeared. — Nafnaf123, Jun 20 '20 at 00:31
did you have a space between `class` and `=` like you do up there? `className` is how javascript references a class, not how html declares a class. Also, be consistent with your quotes. While it doesn't matter if you use single or double quotes in html, you should be consistent throughout your code. Most prefer double quotes in html. — MilkyTech, Jun 20 '20 at 00:34
Does this answer your question? [Remove border from buttons](https://stackoverflow.com/questions/11497094/remove-border-from-buttons) — Vepth, Jun 20 '20 at 11:15

score 0 · Answer 1 · answered Jun 20 '20 at 00:40

About that outlining - it is default style for input type="button" applied by the browser. To fix it you can declare your own border style. For example: 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' />

Removing outline from CSS button

1 Answers1