Eliminating border from CSS button

I am facing an issue with my buttons in a drop down menu displaying a black outline around each button, which I would like to remove to achieve a more integrated look with the background. Alternatively, I am looking to make the outline white so that it is not visible. Below is the HTML code snippet I have been using:

.profiletype {
  background-color: white;
  font-weight: 300;
  letter-spacing: 1px;
  color: black;
  cursor: pointer;
  text-transform: uppercase;
  margin: 5px;
  text-align: center;
}
<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>

I have also included an image showing the current appearance of the buttons:

Answer №1

Regarding the outlining issue - it appears to be the default styling for input type="button" set by the browser. To resolve this, you can create your own custom border style. For instance, you could use: 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' />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A webpage filled with HTML code, presenting an abundance of empty space towards the bottom

I have set up a Relative DIV for my entire page, but for some reason, there is a large amount of empty space at the bottom. Even though I used a background image, it's not very large, and I have already set the bottom margin to 0px. Thank you in adv ...

Is it possible to establish a standard view for the date/time input field, disregarding the user's

When working with a Django Form, I am incorporating a datepicker. While the solution may involve JS and HTML, my query remains specific. date_field= forms.DateField( input_formats=['%Y-%m-%d'], widget=forms.DateInput( format=& ...

Is there a way for this SVG graphic to adjust its size to fit its container without manual resizing

Click here to view the demo In the demo, there is an SVG star placed inside a div with specific width and height. I am looking for a way to make the graphics adjust automatically to fit the size of the wrapper div. Since it's a vector graphic, I beli ...

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

Importing Data from Wordpress JSON Feed to Create a Table

Struggling with organizing my data into a table, as each row is currently generating a new table. Utilizing the JSON Content Importer with the following code: ...

Tips for keeping your content at the forefront of the page while incorporating fluid design elements and background hover effects

I'm facing some issues with the responsiveness of my layout. 1) I am noticing height discrepancies in my boxes when adjusting the screen width. Is there a way to resolve this using heights? 2) I have implemented a hover state using Jquery that darke ...

Guide to inserting a line break for text in quotes within an HTML Div

I'm struggling with formatting a text in HTML, here's the situation: <div>"Book name is:Testbook"</div> What I want to achieve is to display "Testbook" on a new line like this: Book name is: Testbook Unfortunately, I' ...

Creating a responsive YouTube video embed within a div container with a fixed background image

Hello there, I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions. The w ...

"Enhancing web design with jQuery mousemove to dynamically adjust CSS filters according to mouse location

I'm attempting to create a simple mousemove event that changes the CSS filter property of my background div based on the position of the mouse. While I have successfully achieved this in the past with background-color, I am now encountering issues wit ...

Transferring the link value to an AJAX function when the onclick event is triggered

I have a link containing some data. For example: <li><a href="" onclick="getcategory(this);"><?php echo $result22['category']; ?></a></li> I need this link to pass the value of $result22['category']; to ...

Troubleshooting common issues with PHP's simple HTML DOM parser

I've encountered an issue while working on a scraper for a website that involves crawling through links. The error message I'm receiving is as follows: PHP Fatal error: Uncaught Error: Call to a member function find() on null in D:\Projekti ...

Removing the loading spinner from Ag Grid

While utilizing ag-grid with rowModelType=serverSide, I have encountered an issue where the loading overlay includes a spinner as shown in the image below. My goal is to eliminate this spinner from the overlay. I attempted using hideOverlay(), but it seems ...

What is the best method for directing to various pages on a GitHub Pages website?

My GitHub Pages site is live at this link. While the splash page loads perfectly, clicking on the circle to transition to the next page, 'landing.html', leads to a 404 error. I have exhausted all possible solutions to address this issue, includin ...

Avoid navigating through hidden tab indexes

Below is the HTML code that I am working with: <span tabindex="19"> </span> <span tabindex="20"> </span> <span tabindex="21"> </span> <span id="hidden" tabindex="22"> </span> <span tabindex="23"&g ...

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

What is the method to display just the final 3 characters within a paragraph?

Is there a way to display only the last three characters of a string using either a method or a string method? I consistently have a 13-digit number, but I specifically require showing only the final three digits. Appreciate any assistance provided. Than ...

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Upon hitting the submit button in the login form, I encountered the following error message: Forbidden (403) CSRF verification failed. Request aborted. CSRF token missing or incorrect. settings.py MIDDLEWARE = [ 'django.middleware.security.Secur ...

Troubleshoot and resolve the issue of a page scroll freeze bug occurring while scrolling through an overflowed

My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve thi ...

Sliding In and Out: AngularJS CSS Transitions for List Items with Controls

I'm attempting to design a list item with controls on the left and right sides that slide in when the user begins editing the list, and slide out when they're finished. I've managed to create a working example, but I'm encountering an i ...

shard: the dropdown menu can be interacted with by clicking, but the options

Having trouble selecting an item from a dropdown menu on a modal using splinter. Despite the dropdown being visible and clickable, the selection is failing unexpectedly. (Pdb) dropdown = next(i for i in my_browser.find_by_xpath('//select[@name="exist ...