Troubleshooting the issue with customizing checkbox borders in Bootstrap

Looking to customize the appearance of Bootstrap checkboxes by changing the default style. Interested in applying different borders for unchecked, hover and checked states. While adding a shadow works fine, altering the border and background color has proven unsuccessful.

input[type="checkbox"]{
    width: 20px;
    height: 20px;
    border: 1px solid #59A29B;
    background color: #FFFFFF;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

An example of this issue can be seen here: JS Fiddle

Any assistance would be greatly appreciated.

csstwitter-bootstrapcheckbox

Answer №1

In the beginning, the markup provided is incorrect:

<input type="checkbox" value="" id="test">
Option one
</input>

The correct markup should be like this:

<label>
    <input type="checkbox" value="" id="test" />
    Option one
</label>

It's important to note that checkboxes cannot be styled directly with CSS. For alternative approaches, check out How to style checkbox using CSS?

Additionally, there are some mistakes in the CSS properties provided. For example, background color should actually be background-color, but even this won't work for styling checkboxes.

An alternate option instead of using border could be utilizing outline, though it may not be ideal:

#test{
    outline: 1px solid #f00;
}

Check out a demo on JSFiddle.

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

"Utilizing flex-box to create a hover effect for child elements

I am attempting to create a grid caret with a top and bottom caret that displays a grey area when the user hovers over each side. <div class="control-wrap"> <div class="caret-wrap"> <span class="caret">▲</span> </div&g ...

htmlcssflexbox

What is the best way to incorporate Font Awesome icons into a UTF-16 encoded HTML document?

Trying to incorporate Font Awesome icons in UTF-16 encoded HTML pages can be a bit tricky. Following these steps should help you achieve the desired results: <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawe ...

cssunicodeutf-8font-awesomeutf-16

Update input field value with data retrieved via ajax call in AngularJS

My current approach involves using AngularJS directives for Bootstrap in order to create an edit form on a Bootstrap modal when the user clicks on the edit button from a list of items. Here is the code I have implemented: HTML: <div class="modal-heade ...

javascriptajaxangularjstwitter-bootstrap

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox

Seeking Up/Down Arrows HTML numerical input feature specifically designed for iOS devices

I am having an issue with a number input box on iOS. I am utilizing jquery, kendo mobile, and HTML5 for this particular task. While the number input displays up and down arrows in the Icenium simulator, they are not showing on the iPad. I am seeking a sol ...

ioscsshtmlinputkendo-mobile

Swapping stylesheets using a hyperlink - a simple guide

Currently, I am creating a website that utilizes PHP, XHTML strict, and jQuery. The main goal is to ensure the site is adaptable for mobile and desktop devices by implementing the principles of Responsive Web Design. This involves serving different stylesh ...

phpjquerycssxhtmlmobile-website

A sleek and modern fixed navigation bar in Bootstrap 4 featuring two elegantly stacked rows, with a striking brand image perfectly centered

I need help creating a Bootstrap 4 fixed navigation bar with 2 rows. The first row should have a centered brand image like the one on (with the image size changing after scrolling down), and the second row should contain the navigation menu. Thank you i ...

htmlcssbootstrap-4

Issues with CSSClass not functioning properly within C# .NET applications

I have limited knowledge of .NET as I work primarily as an ERP Implementation Consultant. My experience with C# .NET is minimal, but I encounter a strange CSS issue in my C# projects. While the CSS functions correctly in Internet Explorer when running the ...

c#cssasp.net

FlexBox responsive items that are expandable getting cut off

I am currently working on creating a row of expandable items. While I have almost achieved the desired behavior, there are a few issues that I need help with: On Desktop, the items are cut off and not fully visible. On Mobile, half of the items are missin ...

htmlcssreactjsflexboxtailwind-css

Creating a scrollable table with CSS: A step-by-step guide

My table has too many columns causing it to exceed the width of the screen. I would like to make it scrollable horizontally for a neater and more organized appearance. I believe CSS with the overflow hidden property can achieve this, but I am unsure where ...

phphtmlcss

What is the process for changing text to red when hovering over it in a nested list?

a { color:black; } a:hover { color:red; } <ol> <a href="#"><li>Main1</li></a> <a href="#"><li>Main2</li> <a href="#"><li>Main3 <ol> ...

htmlcss

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Why do my buttons exhibit varying colors despite being assigned identical classes?

Creating a user-friendly interface for a news application, I designed six buttons, with two of them in blue (btn-primary) while all have the same classes. For the full code, click here https://codepen.io/tarekhassab/pen/Oojdgw?editors=1010 &l ...

twitter-bootstrapbootstrap-4

`The function `setTimeout` throws an error when passed as a string.`

Here are two pieces of code that may look identical, but one works properly: function hideElement(obj) {setTimeout(function() {obj.style.display = "none";}, 20);} On the other hand, the second one results in error: obj is not defined: function hideEleme ...

javascripthtmlcss

Creating Responsive Social Icons using HTML and CSS

Currently working on my portfolio website, but encountered an error. Can someone assist me in making my social icons responsive? I need the icons to be responsive and aligned horizontally for the mobile version. Here is a visual of the issue with the desk ...

htmlcssresponsiveness

Unusual characteristics found in a select list controlled by Angular

The article titled "How to set the initial selected value of a select element using Angular.JS ng-options & track by" by @Meligy served as my guide while working on implementing a select list (ng-options). Despite achieving the desired basic functional ...

javascriptjquerycssangularjs

Aligning elements in the center vertically using absolute positioning for multiple elements

I have been experimenting with a method to vertically center an element in a div that has unknown height. You can check out the approach I used here: In my case, I am working with anchor tags and this solution was particularly helpful due to the position ...

htmlcsscss-positionvertical-alignment

Is it possible to position my label above my text box input?

Having trouble aligning the checkbox label with the edge of the text area in my login form code. It always ends up on the right side, outside of the div container when inspected. I've attempted setting a left value for the label, but it causes issues ...

htmlcss

The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using: <a id="to-top"></a> <a class="button toTop" href="# ...

javascriptjqueryhtmlcssgoogle-chrome

Preventing click events with pointer-events property in CSS while still allowing scrolling

Is there a way to use pointer-events: none to disable click events on a specific container while still allowing scroll functionality and an overlay? You can view my fiddle here: https://jsfiddle.net/1eu6d3sq/1/ Currently, when I apply pointer-events: non ...

javascripthtmlcss