Step-by-step guide for creating the correct .css for Html.TextBoxFor

When it comes to my design preferences, I always aim for textboxes with a proper style.

For instance:

@Html.TextBoxFor(m => m.Number, new {disabled = "disabled", @class = "special-container"})

And in the .css file:

.special-container
{
    background: -webkit-linear-gradient(#ffffff, #656565 50%);
    background: -o-linear-gradient(#ffffff, #656565 50%);
    background: -moz-linear-gradient(#ffffff, #656565 50%);
    background: linear-gradient(#ffffff, #656565 50%);
    border-left:1px solid #000000;
    border-right:1px solid #000000;
    border-top:1px solid #000000;
    border-bottom:1px solid #000000;
    color: red;
    width:90%;
    font-size: 12px;
    font-weight: 600;
}

Although half of the properties work correctly - such as borders and background - the color, font, and width are totally ignored and I can't seem to figure out why. When I add an attribute that was previously ignored, like color:

Style = "color:red"

It functions as expected.

So, my query is, what am I doing incorrectly if the styles in the .css file are disregarding certain properties, but they still function when added as attributes? What should be the correct outcome?

P.S Apologies for any language errors.

Answer №1

It appears that another element may be conflicting with your CSS styles. I recommend reviewing this carefully.

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

Guide on building a personalized button layout in Bootstrap 4

I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom. To achieve this, I added style={{position: 'fixed' ...

What is the process of incorporating a JS engine into an ASP.NET Core MVC React application?

An error will be displayed by the upcoming service. reference missing services.RegisterJsEngineSwitcher(settings => settings.DefaultEngineName = V8JsEngine.EngineName) .AddV8(); ...

Retrieving images stored locally using HTML Xcode

Scenario: Developing an iOS app using Objective-C. I am attempting to load local HTML files that contain embedded images. The HTML files are located in a directory named pages. The images are stored in a separate directory called images. The project&apos ...

Easy Registration Page using HTML, CSS, and JavaScript

In the process of creating a basic login form using HTML and CSS, I'm incorporating Javascript to handle empty field validations. To view my current progress, you can find my code on jsfiddle My goal is to implement validation for empty text fields ...

Loading jQuery via JavaScript in the head section of the HTML document

I'm currently developing an application using jQuery and jQuery Mobile. I have a script in the head section that dynamically loads both libraries. However, my body contains a script that relies on jQuery ($) and is unable to access it because it loads ...

Is there a way to implement the adjacent selector in combination with the :before selector?

Hello there, I am working on a timeline area with a slick effect and have implemented slick.js for that purpose. I am trying to change the color of my spans within the elements. Specifically, I changed the first span in the slick-active class element succe ...

Is there a way to resolve the issue of my CSS menu dropdown getting blocked by the jQuery slideshow on my website?

Hey there, I'm currently assisting a friend in the development of a website, but I am quite new to this myself. Any advice or tips would be greatly appreciated. The website is being built using asp.net. My sub-menu is getting blocked by images. Is th ...

``Is it possible to adjust the style of an HTML element based on the style of another element?

Within my web application, I am dynamically changing the style of an HTML element using JavaScript. Below is the code snippet: function layout() { if(document.getElementById('sh1').getAttribute('src') == "abc.png") { docum ...

Tips for changing the content of a td element to an input field and removing the displayed value

I am facing an issue with a dynamic table that displays names and input fields. When a name is displayed in a table row, the user has the option to delete that name. I am able to remove the value from a specific table row, but I am struggling to replace th ...

Is there a way to change the background color of the body on click and have it applied throughout the entire site

Is there a way to change the background-color of the entire site and specific modal elements when a user switches between two radio buttons? Here is the HTML code for the radio buttons: <div class="btn-group btn-group-xs" data-toggle="buttons"> ...

Moving SVG fill in a continuous loop

After encountering a strange issue not too long ago, I decided to continue my CSS animation experiments with SVG, specifically focusing on colorization. Initially, I thought that applying the animation rules directly to the <g> tag grouping all the ...

Utilizing JavaScript for enhancing the appearance of code within a pre element

Is there a way to dynamically highlight the code inside a pre element using vanilla JavaScript instead of JQuery? I'm looking for a solution that colors each tag-open and tag-close differently, displays tag values in another color, and attributes with ...

How to Nest Div Elements in Bootstrap Grid System

I'm currently using bootstrap to create the structure for my website. However, I am facing an issue with arranging three div tags within one main div tag. Instead of appearing side by side, they are stacking on top of each other. <div class="col- ...

Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png ...

Is it possible to utilize two webgrids within an ASP.NET MVC framework?

After following this link http://www.codeproject.com/Tips/615776/WebGrid-in-ASP-NET-MVC, I found a helpful solution for a single webgrid. However, I encountered errors when attempting to create two webgrids on the same page with different numbers of colu ...

Optimize the height of embedded Linkedin posts for a seamless viewing experience without the need for scrolling

I have noticed that in LinkedIn embedded posts on my page, each post has a different height and there are scrolls. Is there a way I can make the height dynamic according to the post height? <iframe src="https://www.linkedin.com/embed/feed/update/ur ...

Title showcasing the index of a website

Help Needed: How to Remove "Index of /" Title on Google Search for Jobbulls Website Hello folks, I recently uploaded all the files for my website and when I search for my domain name on Google, it shows a page with the title "Index of /" listing out all t ...

I would like to have the div completely fill the page on my website

How can I make a div fill the entire height of my website using Bootstrap? I want to ensure that the div extends all the way down Please provide guidance on how to accomplish this. ...

Animating a child element while still keeping it within its parent's bounds

I have researched extensively for a solution and it seems that using position: relative; should resolve my issue. However, this method does not seem to work in my specific case. I am utilizing JQuery and AnimeJS. My goal is to achieve the Google ripple eff ...

Incorporating a JavaScript variable into an inline HTML onclick event

Having trouble passing a variable into an inline onclick function. I've tried researching and following suggestions from this link, but encountered errors (Uncaught SyntaxError: missing ) after argument list): pass string parameter in an onclick func ...