I am encountering the issue of CSS affecting all pages when I only intended to apply it to just one

I have designed a custom CSS style for my login page but the issue is that .cssbox, input[type=text]:focus CSS is impacting all text boxes across different pages.

I only intend to use this style for the login page.

Currently, I have one global stylesheet applied to all pages:

.cssbox 
{
    border: solid 1px #C3D9E0;
    background-color: #eeeeff;
    background-image: url(/images/console-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    /*width: 460px;*/
    margin-left: 30%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    /*border-radius: 4px;*/
}

.cssbox, input[type=text]:focus, input[type=password]:focus, 
    textarea:focus, select:focus
{
    border-color: #66afe9;
    outline: 0;
    -moz-box-shadow: 0 0 3px 0 #95B8E7;
    -webkit-box-shadow: 0 0 3px 0 #95B8E7;
    box-shadow: 0 0 3px 0 #95B8E7;
}


<table class="cssbox" cellpadding="5" cellspacing="0" 
    border="0" width="398px" style="height: 287px;margin:0 auto;">

    <tr style="height: 22px">
         <td>
            <asp:TextBox ID="txtEmail" 
                runat="server" type="text" placeholder="Username" 
                CssClass="cssbox-input-text"></asp:TextBox>        
         </td>
    </tr>

</table>
c#cssasp.net

Answer №1

To achieve the desired effect of applying the css only inside .cssbox, you need to make some adjustments to your current css code. Here is the modified version:

.cssbox input[type=text]:focus,
.cssbox input[type=password]:focus,
.cssbox textarea:focus,
.cssbox select:focus   
{
   border-color: #66afe9;
   outline: 0;
   -moz-box-shadow: 0 0 3px 0 #95B8E7;
   -webkit-box-shadow: 0 0 3px 0 #95B8E7;
   box-shadow: 0 0 3px 0 #95B8E7;
 }

Answer №2

To uniquely customize your login page, consider adding a specific class to the body tag only on that page:

<body class="login-page">
    ....
</body>

Adjust the CSS selectors from

.cssbox, input[type=text]:focus

to

.login-page .cssbox, .login-page input[type=text]:focus

This way, the styling will apply specifically to elements within the login page body with the designated class.

NOTE: Make sure the initial selectors you've chosen are correct before implementing this approach.

Answer №3

Is the use of class="cssbox" specific to the login page?

If it is, you should define your input[type=text]:focus like this:

.cssbox input[type=text]:focus {

...

}

If you want the same box-shadow and border styles for both .cssbox and the input[type=text]:focus within it, then you should use:

.cssbox, .cssbox input[type=text]:focus {

...

}

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

Can you explain the distinction between System.Diagnostics.Trace, System.Diagnostics.Debug, and System.Console?

I'm curious about the default behaviors of System.Diagnostics.Trace and System.Diagnostics.Debug in contrast to System.Console. Are these behaviors configurable? It seems there is some confusion online regarding this topic, but I believe there are spe ...

c#asp.net.netloggingdiagnostics

Configuring .NET to support multiple configurations of a specific set of parameters

My application has the capability to connect to multiple servers, but the exact number of servers is unknown until runtime and can change daily. Each server requires several parameters for full definition. I am attempting to configure the application usin ...

c#.netconfiguration

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

htmlcss

Looping through an array of objects in VueJS can become a bit tricky when dealing with objects whose properties are dynamic. How can I efficiently

I am looking to create a matrix display from an array of objects, but the properties of the objects may change over time. Here is an example of the data: [ { location: "Japan", webhookStatus: "Up", authenticationStatus: &q ...

htmlcssvue.jsvuejs3

c# selecting a specific token using jtoken

I'm having some trouble extracting a URL value from a JSON using JSON.net and the jtoken SelectTokens method. I can successfully retrieve the label for the URL, but I can't seem to access the actual URL value. Specifically, I am trying to extrac ...

c#jsonjson.net

When flex items refuse to shrink despite using flex-shrink

I'm struggling to shrink the flex items in my layout despite using the flex-shrink property. I've experimented with adjusting the vh and vw values of the .row (flex parent), playing around with margins and padding, but still, the items won't ...

cssflexbox

RadGridTemplateColumn with RadGridList filter applied

In my Telerik Grid, I have a template column that includes a RadGridList. This column is populated with data from a StringCollection, resulting in multiple values within the column. I am currently attempting to filter this column using a combobox. While I ...

c#asp.netteleriktelerik-gridradgrid

Customizing the CSS shadow for a specific ionic select text color, while ensuring that other ion select instances remain unaffected

I'm encountering an issue while attempting to customize the text color inside an ion select element based on the option selected. Unfortunately, when I make changes to the shadow part in one component, it affects other components as well. I want to ap ...

cssreactjsionic-frameworkshadow-dom

Looking up individuals by their names and identification numbers on an asp.net platform

When searching in asp.net, I need to consider filtering by both ID and name. Should I use separate text boxes for each field or just one? Which condition should I check to verify if the user entered an ID in the ID field or a name in the name field? I am ...

asp.netsql

choose a div with additional padding at the top

I am looking to create a dropdown menu with a custom arrow design. I have attempted to achieve this by wrapping my select element in a div with an arrow image background. The issue I am facing is that the select element seems to have 3-4 pixels of top p ...

htmlcss

Tips for avoiding Navbar dropdowns covering other content

Using bootstrap 4 for a project and experiencing an issue with the navbar overlapping the content. How do I make the remaining content adjust when toggling the dropdown menu? To address this problem, I have applied a 50px margin to the body element. The ...

htmlcssbootstrap-4navbar

JSON struggles to properly handle the default value of a datatable column when serializing/deserializing

In my datatable, certain columns need to have default values until the user updates them. I've used JSON for serializing and deserializing the datatable for saving and loading purposes. While the serialization/deserialization successfully loads previo ...

c#jsonserializationdatatable

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

https://i.sstatic.net/A1eUh.png I am currently working on a project where I want to divide the screen into three sections. One section will cover half of the screen to display an image slider, and the remaining half will have two sections which is already ...

javascriptjqueryhtmlcss

Managing Image Quality with Unsplash API

How can we ensure high quality images are embedded on the web using Unsplash API or other methods? The image displayed in the example below appears blurry and unclear compared to the original image. Original Image link: Example of embedding the image abo ...

javascripthtmlcssapi

Unable to adjust height in AngularJS

I'm attempting to adjust the size of a textarea using AngularJS within a directive. I attach an attribute auto-resize to my textarea and define the directive as follows: app.directive('autoResize', function() { return { restrict: &ap ...

cssangularjs

Tips for changing the label value in gridview to a different value

I am currently working with a GridView that includes an Ajax Rating Control. I am updating the rating value on the change event and saving that data to the database using a SQL DataSource. However, I am facing an issue where the database gets updated but t ...

asp.net

What is the best method to ensure that my background image is fully visible on a webpage?

I'm attempting to place a background image at the center of my webpage, but unfortunately, the image extends beyond the page boundaries and is only partially visible. Below is my CSS code snippet: body{ background-image: url(../img/music_palace_ ...

htmlcssimage

How can I create a label with a full width in Bootstrap?

Currently, I am utilizing bootstrap in the following manner: <label> <input type="text"> </label> The issue at hand is that the label element comes hardcoded with display: inline-block;. Is there a way to remove this or make it look ...

csshtmltwitter-bootstrap

Creating a Font Selection Dropdown in C#

Looking to create a dropdown list in a C# .NET 4.5 Windows Forms application to showcase all the TrueType fonts installed on the computer. Each font should be displayed using its corresponding formatting, such as "Times" in Times New Roman and "Arial" in A ...

c#.netwinformsfontscombobox

Are there any jQuery plugins available that animate elements as the page is scrolled?

Looking for a library that can create entry animations for elements as the page is scrolled? I previously used the animate it library, which was great - lightweight and easy to use. However, it doesn't seem compatible with the latest jQuery version (3 ...

javascriptjquerycssanimation