The function jQuery .css('border') fails to return any value when used in Firefox

Currently, I am designing a webpage that includes textareas. Several of these textareas are styled with a unique class called "whitebord" which has the following CSS properties:

textarea.whitebord, textarea.whitebord:focus {
    border: 1px solid #fff;
    outline: none;
}

In addition to this styling, I have implemented a jQuery script that changes the border color to black. The script is designed to check if a border is already present before setting it to black. If a border is detected, the script does not interfere; however, if no border is found, it defaults to black. This detection process is based on the following code snippet:

$(this).css('border')

Although this implementation works smoothly in Chrome and IE, Firefox behaves differently by returning nothing even when a border is clearly visible. Is this a known bug or is there an alternative approach for resolving this issue?

If any further details are required, feel free to reach out.

Answer №1

Looking back, I remember encountering a similar issue where I had to individually confirm all the borders (left, right, top, bottom).

$el = $('a');
if ($el.css("border-right-style") == "solid" && $el.css("border-left-style") == "solid" && $el.css("border-top-style") == "solid" && $el.css("border-bottom-style") == "solid") 
{
    alert('yay');
}

Source: Use JQuery to check if element has a border?

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

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to ...

Having issues with json_encode not functioning correctly?

It's quite a puzzling subject... I believe the json_encode php function should be working flawlessly. However, there seems to be an issue with what I'm attempting to do. In my PHP code, I have a variable that holds actual data. This data is str ...

Swap the content of one div with another div using client-side code only

Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files ...

Modifying the CSS class of an element does not produce the desired effect after altering its styles using JavaScript

html: <input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> <br><br><br><br> <button id="s">set to visible class</button> <button id="h"> ...

The Info button in Bootstrap5 is sporting a sleek combination of blue background and black text, deviating from the traditional blue and

Check out my full code for the Random Quote Generator Project on Codepen: here I implemented Bootstrap5 from this link: Bootstrap CDN. The button style btn-info is not displaying correctly in my project. I'm puzzled and would like to understand why ...

Tips on eliminating the top margin on my webpage

I am in need of assistance with removing the margin at the top of my page. Take a look at the screenshot for reference: As shown in the image, there is a red arrow pointing to the problematic margin. Can someone guide me on how to eliminate this margin? B ...

Changing background color using jQuery ID selector

Within thisid, the id of an html element is stored. In order to modify its background color, the code below can be utilized: let thisid = 'test'; $("a#" + thisid).css("background-color", "yellow"); <script src="https://cdnjs.cloudflare.com/a ...

What is the best way to boost a number using an input value?

I am looking to dynamically increase the number in the span tag based on the number of characters entered in the input field. Each character entered should equate to 5. While my current setup is somewhat functional, there are some minor issues. $(functi ...

What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here&ap ...

Generating alternate list items

I'm attempting to design a list style that resembles the one depicted in the image linked below: https://i.stack.imgur.com/U7vMw.jpg My issue is that when I try to add borders, they end up applying to the entire structure. .styled-list { list-st ...

Transition the color of the button smoothly from btn-primary to btn-success

Can you make the btn-primary color button gradually change to the color of btn-success when a specific ID is clicked? I attempted to animate it with the clicked ID using this code: $(".add_to_cart").parent('.change-style-after-click[data-id="'+i ...

Rearranging Information for Optimal Mobile Viewing

I am in the process of designing an HTML email template, and I am working on ensuring its compatibility with mobile devices. Currently, I have arranged an image, followed by text and a button, but my goal is to switch the order for mobile displays so that ...

How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...

Utilizing Jquery and tablesorter in conjunction with PHP to handle the retrieval of

My attempt to use tablesorter for parsing json returned from a PHP POST request is facing issues. Although the POST request successfully returns the JSON data, the tablesorter does not seem to work properly. It appears that only the static table data is ...

Invoke the do_action function with JavaScript/jQuery

After successfully logging in through Facebook, my AJAX function sends information to the userpro_ajax_url. In order to run a do_action function within the success block, I am trying the following: <?php ob_start(); do_action('userpro_social_l ...

Create a CSS path that connects two points by drawing a line

My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...

Tips for displaying data by using the append() function when the page is scrolled to the bottom

How can I use the append() function to display data when scrolling to the bottom of the page? Initially, when you load the page index.php, it will display 88888 and more br tags When you scroll to the bottom of the page, I want to show 88888 and more br ...

Implement a countdown and reset feature using JavaScript

I'm trying to display a countdown on my website for all users without using any backend language. The countdown starts at 20 and decreases by 1 every 1min. So after 2mins, the value should be 18, and when it reaches 3mins, it should reset back to 20. ...

Dynamic Elastislide

When injecting values dynamically into the Elastislide responsive slide like so: var $items = $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/lar ...