CSS help
-
I've got a style sheet for my aspx page, and I set the cssClass for my linkbuttons there. My cssClass has a :hover extension so that the appearance of my link button changes when the mouse hovers over it. This all works ok. My problem is that I am trying to do the same thing with textboxes, trying to make them change when the mouse hovers over them. This is where my problem lies because it doesn't do anything... Is this just because they are textboxes or am I doing something wrong
.myTextbox:Active /* doesn't work: I wanted the textbox background to change color when it has focus */ { background-color:Lime; } .myTextbox { font-family:Arial, Verdana, Tahoma; font-size:12px; background-color:White; border-style:solid; border-color:"#7F9DB9"; border-width:1; }/jason -
I've got a style sheet for my aspx page, and I set the cssClass for my linkbuttons there. My cssClass has a :hover extension so that the appearance of my link button changes when the mouse hovers over it. This all works ok. My problem is that I am trying to do the same thing with textboxes, trying to make them change when the mouse hovers over them. This is where my problem lies because it doesn't do anything... Is this just because they are textboxes or am I doing something wrong
.myTextbox:Active /* doesn't work: I wanted the textbox background to change color when it has focus */ { background-color:Lime; } .myTextbox { font-family:Arial, Verdana, Tahoma; font-size:12px; background-color:White; border-style:solid; border-color:"#7F9DB9"; border-width:1; }/jasonHi Jason! CSS alone won't produce the required results in all situations, where you need to go for DHTML (CSS with some scripting languages). I hope the following code works for your requirement. Define a function in javascript which takes two parameters: 1. A reference to the control which is calling the function 2. The color you want to apply to the textbox when the mouseovers. function ChangeColor(txt,color) { txt.style.background=color; } Add attributes to the required textboxes in the page_load() event of your code behind file as follows: txtbox.Attributes.Add("onmouseover","ChangeColor(this,'pink');"); txtbox.Attributes.Add("onmouseout","ChangeColor(this,'white');"); Run and text your .aspx. Happy Programming! Subrahmanyam.
-
Hi Jason! CSS alone won't produce the required results in all situations, where you need to go for DHTML (CSS with some scripting languages). I hope the following code works for your requirement. Define a function in javascript which takes two parameters: 1. A reference to the control which is calling the function 2. The color you want to apply to the textbox when the mouseovers. function ChangeColor(txt,color) { txt.style.background=color; } Add attributes to the required textboxes in the page_load() event of your code behind file as follows: txtbox.Attributes.Add("onmouseover","ChangeColor(this,'pink');"); txtbox.Attributes.Add("onmouseout","ChangeColor(this,'white');"); Run and text your .aspx. Happy Programming! Subrahmanyam.
Thanks a lot for your code Subrahmanyam, it did the job nicely Subrahmanyam_K wrote: CSS alone won't produce the required results in all situations Any idea why this would be? the code works for a link button, but not for a textbox. Is it just because they are two different types of asp.net control? Thanks again /jason
-
Thanks a lot for your code Subrahmanyam, it did the job nicely Subrahmanyam_K wrote: CSS alone won't produce the required results in all situations Any idea why this would be? the code works for a link button, but not for a textbox. Is it just because they are two different types of asp.net control? Thanks again /jason
Hi Jason, If you observe while using CSS, The Anchor Tag can be associated with some styles say(A:Hover, A:Visited etc..) for use in CSS. So, those styles will be applied for all the anchor tags on the page. Whereas, the other HTML Elements do not. We need to use some scripting langauge to make the other HTML elements interactive. And the main point here is that when an asp:linkbutton is used in your .aspx page, this will render an HTML anchor tag. So, any styles defined for the anchor tag will be applied. But, an asp:textbox renders in an HTML tag. To achieve the same for the other controls, we have to add attributes to the ASP.NET Server controls in our HTML file or Code behind file. Thank You, Subrahmanyam.
-
Hi Jason, If you observe while using CSS, The Anchor Tag can be associated with some styles say(A:Hover, A:Visited etc..) for use in CSS. So, those styles will be applied for all the anchor tags on the page. Whereas, the other HTML Elements do not. We need to use some scripting langauge to make the other HTML elements interactive. And the main point here is that when an asp:linkbutton is used in your .aspx page, this will render an HTML anchor tag. So, any styles defined for the anchor tag will be applied. But, an asp:textbox renders in an HTML tag. To achieve the same for the other controls, we have to add attributes to the ASP.NET Server controls in our HTML file or Code behind file. Thank You, Subrahmanyam.
This is what I am interested in, do you know where I can get a list of controls that are anchors and which aren't? Subrahmanyam_K wrote: we have to add attributes to the ASP.NET Server controls in our HTML file or Code behind file. is this just controlName.attributes.add("attributeName") = attributeValue? if so how would you use this to make it an anchor? sorry to ask so many questions, but this is interesting to me...sad isn't it? :^) /jason
-
This is what I am interested in, do you know where I can get a list of controls that are anchors and which aren't? Subrahmanyam_K wrote: we have to add attributes to the ASP.NET Server controls in our HTML file or Code behind file. is this just controlName.attributes.add("attributeName") = attributeValue? if so how would you use this to make it an anchor? sorry to ask so many questions, but this is interesting to me...sad isn't it? :^) /jason
Jason! We can not modify the server controls to render anchor elements. The rendering process will be done by ASP.NET as how the server controls are developed to render. What we should check is the equivalent HTML control for all the server controls after rendering. Then we can program to make the rendered HTML controls interactive by adding attributes in the code behind file. Try developing a small Custom control, so that you will be clear how the server controls work. Some good examples are provided in Online MSDN. And this is how Attributes are added to the Server controls in the code behind file: ControlName.Attributes.Add("AttributeName","AttributeValue"); Happy Programming! :) Subrahmanyam.