Question 413596 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Styles Not Applying to Button: How to Remove Blue Highlight on Click?

I am developing a web application via pycharm using html, css, and js. Currently I am having issues with the upload button, which is intended to trigger the upload of source code. I am still learning but I could not find a solution.

The issue when you click and hold the “Upload” button, it exhibits an unwanted visual behavior where it turns blue. Granted I do not have to hold it down but even when clicking for a brief moment there is blue.

upload button gif

This is the css code that I have:

.btn-primary {
    background-color: #fc3e00;                       
    border: none;                                    
    border-radius: 5px;                              
    transition: background-color 0.3s ease, transform 0.2s ease; 
    color: white;                                    
    appearance: none;                                
}

.btn-primary:hover {
    background-color: #b80c09;                       
}

.btn-primary:focus {
    outline: none !important;                        
    box-shadow: none !important;                     
    background-color: #b80c09;                       
}

.btn-primary:active {
    background-color: #b80c09;                       
    transform: scale(0.95);                           
    box-shadow: none !important;                      
}

This is the HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- CSS Link -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i"
          rel="stylesheet"/>
    <!-- Project Name -->
    <title>Viewie - Source Code Visualizer</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-4">Welcome to Viewie: A Code Source Visualizer!</h1>
        <h2 class="text-center mt-4">Input your Python, Javascript, or Java Code :D</h2>
        <form id="codeForm" class="mt-4">
            <div class="form-group">
                <textarea class="form-control" id="code" rows="10" placeholder="Please upload your source code :)"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <div id="output" class="mt-4"></div>
        <div id="umlDisplay" class="mt-4"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

I did try setting the outline as none and the box-shadow but that has not worked. Ive seen on here that same solution for mobile but I havent seen anything for non-mobile, unless I am blind. I have also refreshed the page and the application. Ive also tried a different browser as Im currently using Firefox.

Tags:

2

Answers


  1. 0

    You also need to add !important to the colors in the css file. So the button appearance will be correct.

    .btn-primary {
    background-color: #fc3e00 !important;                       
    border: none !important;                                    
    border-radius: 5px;                              
    transition: background-color 0.3s ease, transform 0.2s ease; 
    color: white;                                    
    appearance: none;                                
}

.btn-primary:hover {
    background-color: #b80c09 !important;                       
}

.btn-primary:focus {
    outline: none !important;                        
    box-shadow: none !important;                     
    background-color: #b80c09 !important;                       
}

.btn-primary:active {
    background-color: #b80c09 !important;                       
    transform: scale(0.95);                           
    box-shadow: none !important;                      
}
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- CSS Link -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

    <!-- Font Link -->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i"
          rel="stylesheet"/>
    <!-- Project Name -->
    <title>Viewie - Source Code Visualizer</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center mt-4">Welcome to Viewie: A Code Source Visualizer!</h1>
        <h2 class="text-center mt-4">Input your Python, Javascript, or Java Code :D</h2>
        <form id="codeForm" class="mt-4">
            <div class="form-group">
                <textarea class="form-control" id="code" rows="10" placeholder="Please upload your source code :)"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>
        <div id="output" class="mt-4"></div>
        <div id="umlDisplay" class="mt-4"></div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Option: Using :focus pseudo-class

    Your CSS already defines styles for the .btn-primary:focus state. You can add the outline: none; property to remove the default browser outline:

    .btn-primary:focus {
  outline: none !important;  
  box-shadow: none !important;
  background-color: #b80c09;
}

    Also check the cache in the browser, is there any conflicting styles in Bootstrap that is why I put !important to override.

    The :focus pseudo-class applies styles when an element receives focus and the outline property controls the outline around an element when focused.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search