Having an issue with CSS button borders not functioning as expected for some unknown reason

My CSS button has a border added, but it doesn't seem to be showing up. Can anyone provide suggestions on how to fix this issue? Below is the snippet of the code:

body {
  background: grey;
}

a.button {
  display: inline-block;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS BUTTON</title>
</head>
<body>
<a href="#test" class="button">Click Me</a>
</body>
</html>

htmlcssbootstrap-4

Answer №1

To remove the default button styling on iOS, use -webkit-appearance: none; instead of "button". For further information, check out this insightful article. Additionally, I have provided code below to help style your button:

body {
background: blue;
}

a.button {
  display: inline-block;
  /*-webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;*/
  -webkit-appearance: none;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
<a href="#test" class="button">Click Me</a>

Answer №2

If you delete the line -webkit-appearance: button; or change it to 'none', the button will change its appearance. It seems like appearance properties do not affect border styles.

Answer №3

When utilizing the -webkit-appearance property, its main function is to allow the browser to render an element with platform-native styling based on the operating system's theme.

However, this can result in the operating system's styling conflicting with your custom CSS. To overcome this, you can set -webkit-appearance to none along with applying your custom CSS for desired styling.

Below is an example of how you can implement custom styling:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
}

input[type="checkbox"] {
    border: 2px solid #555;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="checkbox"]:checked {
    background: #555;
    background-clip: content-box;
}
input[type="radio"] {
    border: 2px solid #555;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="radio"]:checked {
    background: #555;
    background-clip: content-box;
}
p, h3 {
    color: #333;
    font-family: helvetica, arial;
}
label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 -2px 8px;
}
<h3>Check:</h3>
<p><input type="checkbox"></input><label>Include Options</label></p>
<h3><br/>Select one:</h3>
<p><input type="radio" name="radio"></input><label>Option A</label></p>
<p><input type="radio" name="radio"></input><label>Option B</label></p>

Answer №4

By changing the button to -webkit-appearance-button, the border becomes invisible.

a.button {
  display: inline-block;
  text-decoration: none;
  background-color: black;
  border: 5px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS BUTTON</title>
</head>
<body>
<a href="#test" class="button">Click Me</a>
</body>
</html>

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

Alignment of containers on the same level in a horizontal direction

Looking to achieve horizontal alignment of div containers. The container on the left (with a blue border) may have a fixed height. The other two containers (with red borders) should be aligned horizontally to the left blue container regardless of its heigh ...

htmlcsstwitter-bootstrapflexbox

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

How can I get rid of the table borders and set colors for every other row in the

How can I remove the border lines from a table and assign colors to alternate rows in the table? Follow this link for the code: https://stackblitz.com/angular/kooxxyvddeqb?file=app%2Ftable-sticky-columns-example.css Thank you in advance ...

htmlcssangulartypescript

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

I have a problem with validating checkboxes in my Angular application. The checkboxes are generated dynamically from an array using ngFor loop, and I want to make sure that at least one checkbox is selected before the form can be submitted. The validatio ...

htmlangulartypescript

Framework designed to be compatible with Internet Explorer 7 for seamless

Is there a CSS framework that provides full support for IE7 without any issues? Specifically, something similar to Twitter Bootstrap but with guaranteed rounded corners and properly functioning tabs. I have experienced problems with the Popover plugin sp ...

cssinternet-explorer-7css-frameworks

I am struggling to find the right way to center those images

https://i.sstatic.net/aRkvl.jpg Hello everyone, I'm currently attempting to set up the main content of the homepage resembling the image provided, but I'm encountering some challenges. Every approach I take seems to cause the image to overflow ...

htmlcssflexbox

Attempting to assign a value to the Progress Circle

Can I modify the code to incorporate a hardcoded number instead of displaying "Goals completed:" and still have the progress bar reflect the percentage? I want to hide the prompt for users to input a number and handle all updates behind the scenes. Essent ...

javascripthtmlcssprogress-bar

The debate over website background images: balancing size and speed

Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...

htmlrenderingbackground-image

Gone Without a Trace: Where Did the WP Admin

I am brand new to creating WordPress themes and I have just started working on my very first one. I have managed to get some content up and running, and the home page is functioning properly. However, when I log into WordPress and view the site, I noticed ...

phphtmlwordpress

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

I'm struggling to adjust the height of a div based on whether a list item within it contains a nested unordered

I have been working on a horizontal menu that is functioning well for me. However, according to the design requirements, I need to adjust the height of <div id="nav-subMenu"></div> if the main/parent menu li does not have any submenus or ul. Th ...

javascriptjquerycss

The issue with jquery slideToggle is that it mistakenly opens all divs instead of just the specific div that should

My website has a dynamic page with a variable number of <div> elements. The concept is that users can click on the + symbol, which is represented by an <img> tag, to display the corresponding div. Currently, my code includes: PHP/HTML $plus ...

javascriptphpjqueryhtml

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Unable to insert text into JEditorPane using text/html format

In my class, I am using a JEditorPane to display text that needs to support HTML. When I try to add text to the pane by setting the content type to HTML and then using setText(), nothing appears on the pane. The issue seems to be with setting the content ...

javahtmlswingjeditorpane

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

Having trouble understanding how to display an HTML file using Next.JS?

Currently, I am working on a project that involves utilizing Next.JS to develop a webpage. The main goal is to display a PDF file on the left side of the screen while integrating Chaindesk on the right side to create a chat bot capable of extracting inform ...

javascripthtmlreactjsnext.jschatbot

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

htmlcsstextflexbox

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

javascriptphpjqueryhtmlcss

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs