CSS: Changing border color based on current page

To achieve the desired effect, I need to change the border color to red when a specific page is active. When the phone option is clicked, the border should stay red consistently on that same page, and when the email option is clicked, the border should turn red while the phone border reverts back to black.

.EPbutton{
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color:black;
  border-bottom: 2px solid black;
  width: 130px;
  height: 20px;
  margin-top: 12px;
  margin-bottom: 5px;
}
htmlcss

Answer №1

If PHP is your chosen language, you have the option to utilize the $_SERVER superglobal in order to access the path. You can then insert a conditional statement within the tag itself, assigning it a specific class when it is active... For example:

<button class="EPButton <?= $_SERVER['REQUEST_URI'] === '/home' ? 'active' : '' ?>">
    Test button
</button>

As for the CSS styling, consider implementing the following:

.EPButton.active {
    border-color: red;
}

Answer №2

Start by defining a fresh class in your CSS stylesheet

.highlighted {
border: blue dashed 3px;
}

You can now apply this class to any element you want to have a border around on every page of your website.

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

JavaScript Loading Screen - Issues with window.onload functionality

I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected. The Issue: I discovered that using window. ...

javascripthtmlcss

Problem with the mobile site width due to viewport misalignment

Our website is currently experiencing an issue with the viewport, but it seems to only occur on mobile devices: If you visit the site on your mobile device, you may notice a large gap on the right side of the page. Strangely, this problem does not appear ...

htmlcssmobileviewport

Delivering HTML, CSS, and JS through the power of Node.js and Express.js

const express = require('express'); const path = require('path'); const app = express (); app.use(express.json('public')) app.get('/PKorn/zealtech', function(req, res) { res.sendFile(path.join(__dirname, &a ...

htmlcssnode.js

Java - Changing Font Size in HTML JTextPane with CSS Styling

When utilizing the following code snippet: Action sizeAction = new StyledEditorKit.FontSizeAction(String.valueOf(size), size); The button associated with the action adds the HTML tags: <FONT SIZE="5"> My text here </FONT> Utilizing these ta ...

javahtmlcssactionfont-size

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Currently, I am facing issues while attempting to generate a dynamic menu based on the elements present on the page. Is there a way to develop a menu using the following code structure?: <div class="parent"> <div class="one child" id="first"& ...

javascriptjqueryhtml

Fragment with HTML embedding for full screen video display in web view

Hello everyone, I have a question about enabling full-screen support for HTML embedded videos in my webview. I have set hardware acceleration to true in the manifest and the video plays fine, but when I try to go fullscreen, the video stops. Here is my co ...

androidhtmlvideowebviewfullscreen

When the user clicks on the iframe, they will be redirected to the

My goal is to create a scenario where clicking on an iframe opens the same URL in a new browser tab, while ensuring that scroll and other mouse events within the iframe are not affected. I have experimented with various approaches but none have been succe ...

javascripthtmlnpmiframe

Position the div in the center, but for smaller sizes, switch to aligning

My current layout setup is as follows: Left side bar with a width of 200px and positioned at left: 0; Center section with a width of 700px and positioned at left: 250px; Right side bar with a width of 200px and positioned at right: 10px; While this arra ...

css

What is the best way to implement a background image using Tailwind in Next.js?

I am facing an issue with displaying a background image in my project. The image is stored in the public folder and named bg.png. In the index.js file located in the pages folder, I have attempted to set this image as a background but it seems to not be ...

cssnext.jsjsxbackground-imagetailwind-css

Is it possible to monitor a section of a webpage's source code for any updates and notify about them?

This question may seem a bit confusing, but I am in need of some guidance. I do not require any code to be written for me, but rather assistance in finding the right direction to achieve my goal. The task at hand is to monitor a specific area of a web page ...

htmlautomationconsoleweb-scraping

What is the best way to create interactive canvases that respond to multiple clicks using JavaScript?

Within the canvas, the code snippet below aims to generate a grid of 10x10 colored boxes with alternating reddish and bluish shades on a gray background. The intention is for each canvas to only respond to mouse interactions when the mouse is within its bo ...

javascripthtmlcanvas

"Create a HTML Form with a Submit Button that Does Not Refresh the Page

I created a form with fields for Name and Email, along with a submit button. The submit button is set to trigger the invite() JavaScript method upon being clicked. <form id="inviteForm" action=""> <div class="modal-body"> ...

javascripthtmlbootstrap-4

Guide to integrating a legend with ngb-timepicker form?

Is there a way to add a specific tag to the fieldset of ngb-timepicker? I'm having trouble finding a solution for this. Has anyone else tried to do this before? ...

htmlangularlegendtimepicker

Utilize the Static Path in Django with Template Filters

To easily version my css file using a simple template variable, I update the version in my settings and it automatically applies to all files. Here's how I accomplish this: Template Filter @register.filter def settings_value(name): return getatt ...

cssdjango

How can CKEditor ensure that there is a paragraph tag within a div element?

Working on my current CMS, I have the need to include some custom HTML (which is functioning as expected): var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>"); The issue arises when atte ...

javascripthtmlckeditor

Troubleshooting Problems with Horizontal Overflow in Side Tab Widget

Is there anyone familiar with resolving the issue of horizontal scrolling on this demo? Check it out here. The goal is to have the widget open only upon clicking, but I have noticed an issue with horizontal scrolling. Thank you. ...

jquerycsshtml

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

javascripthtmlcss

Struggling with missing spaces when converting XML with HTML elements to CSV

I encountered an issue while trying to convert an XML file with HTML tags to CSV. For example, when I attempt to parse the following: "<strong>Nokia</strong> connecting people" from the XML description field using < strong > tags, in t ...

c#htmlxmlcsv

Having trouble removing lines from Router Link? Unfortunately, using style={{'textDecoration': 'none'}} doesn't seem to be doing the trick

Does anyone know why the text decoration is not working on my link when I use text-decoration none? Any solutions or suggestions would be greatly appreciated. Thank you in advance! Navbar.js file import React,{useState} from "react"; import { mak ...

cssreactjs