I am using asp.net text box and I am showing the border for the text box on mouse hover event and its pretty well doing it's job for the first time and when I click on the text box and again click outside the textbox and If I mouse hover the same textbox it dosen;t show me the border.
Can anyone say me where I am doing wrong?
Thanks in advance!
Here is my css code:
.onfocus
{
border-width: thin;
border-color: #0033CC;
}
.onblur
{
border:0px;
}
.MyTextbox:hover{border:1px solid red;}
Here is how I am using it:
<script type ="text/javascript">
function Change(obj, evt) {
if (evt.type == "focus")
obj.className = "onfocus";
else if (evt.type == "blur")
obj.className = "onblur";
}
<asp:TextBox ID="txtUsername" runat="server" Style="position: absolute; top: 76px;
left: 24px; width: 189px; height: 24px; outline: none;" onfocus ="Change(this, event)"
onblur ="Change(this, event)" BackColor="#FAFFBD" CssClass="MyUsername" ></asp:TextBox>
" outline: none;"
where is the style attr ?
The hover is not working the second time because your javascript code on focus/blur is changing the class value for the textbox so that it no longer has the "MyTextbox" class. Since your border change on hovering is done based on the MyTextbox class, it no longer works after that.
What you should be doing instead of setting obj.className = "onfocus", is to add the "onfocus" class to the existing value so that it is not lost. Then, during the blur event, you would remove the onfocus class, and add in the onblur class (again, not just totally replacing the className value).
This question has some good answers about how you can properly add/remove the extra classes in either plain javascript or with jQuery (which makes it much easier).
Related
I am trying to create a material design inspired textbox.
I have read similar questions/answers around. However, my question is little different, so kindly read on.
Here is my stylesheet for the page -
.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}
.textbox{
border-bottom: solid 2px #984343;
border-top: none;
border-left: none;
font-family: Candara;
width: 30%;
}
.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}
.textbox:focus{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, input:valid+label{
top:-15px;
font-size:10px;
}
Here is the textbox which I am trying to create -
<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>
It works fine like a material design inspired textbox, where the text moves up upon typing.
However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.
I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?
I have also tried this putting a 'required' in the input filed, that did not help either.
Please let me know if I should explain any further.
I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.
The way to implement it using JavaScript that would be as follows:
Add a onfocusout event listener to all the textfields which you want that label to stay up.
<input class='textbox' type="text" onfocusout="leaveFocus(event)" />
Next, you have to create the function which gets called everytime the textField looses focus.
function leaveFocus(event) {
const textField = event.target;
// Check if textField is empty
if (textField.value !== '') {
textField.classList.add('has-text);
} else {
// Otherwise, textFiled has text
textField.classList.remove('has-text);
}
}
That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.
Now in your css, you have to add has-text to all the styling you have for the label going up, like this:
.textbox:focus, .has-text{
border-bottom: solid 2px #4CAF50;
outline:none;
}
.textbox:focus + label, .has-text + label, input:valid+label{
top:-15px;
font-size:10px;
}
Let me know if this answers your question, and let me know if you need any more help.
I have an ASP.NET text box. I am trying to set the color of the border to green when the textbox gains focus, and I want to be specific about the class of the textbox. The text box looks like this -
<asp:TextBox CssClass="myInput" BorderStyle="None" runat="server">Search</asp:TextBox>
NOTE: I have BorderStyle="None" to start with, because when the textbox does not have focus, I want no border showing. Currently a border is shown on focusing, but it's not the color I want.
I have tried the following in my CSS file -
.myInput:focus {
border: green;
}
and
input.myInput:focus {
border: green;
}
(and a few others) but nothing has worked. Can someone please tell me how it can be done?
Thanks!
Yep, you need to remove the BorderStyle="None" from your TextBox control.
Set the border style for this in CSS, then you can use the focus
Have a look at this http://jsfiddle.net/xXEWK/
you can't see the textbox at first - click just to the right of where you see 'Textbox ->'
Have a look this
Instead of border: green you need to use border: 1px solid green;
And your text box should be like this
<asp:TextBox CssClass="myInput" runat="server">Search</asp:TextBox>
Update
I think then its better to use jQuery.
You can add a class on foucus and remove the class when out focus
See more about focus and focusOut
See this sample
I had to use -
.myInput:focus {
border:solid 1px green !important;
}
Because the border style was being overridden by other CSS settings.
you can use like this
<asp:TextBox ID="txtSearch" CSSClass="myInput" runat="server">Search</asp:TextBox>
I have a standard input textbox that I've styled using css and psuedo-class elements Hover and Focus. The css I am using is pretty simplistic:
.riTextBox:hover,
.riTextBox:focus
{
border: solid 1px #F1C15F;
}
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
All is working great except when the textbox has text in it and is selected with the mouse, and as you are selecting the text you leave the bounds of the textbox (with the mouse button still down), and then mouse up somewhere outside the textbox. You will notice that the textbox border is still highlighted as if it never lost focus.
It seems that the onselect event of the textbox is conflicting with onblur, but I'm not sure. See here to reproduce this frustrating issue:
http://jsfiddle.net/pBkhT/7/
Thanks for any help you can provide!
This answer is a little late, but it works for your problem. Simply remove the focus event that is coupled with the hover event. Your original hover border will still remain on focus (when user clicks the box), but when the user moves the mouse away, the hover styling will disappear, even when the mouse button is still down.
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
.riTextBox:hover
{
border: solid 1px #F1C15F;
}
I have a problem with asp:button styling. I added following style:
.myAspButton {
background-image: url("image for button");
width: 110px;
height: 25px;
color: white;
font-weight: bold;
vertical-align: middle;
}
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" />
Problem is when I press button it gets that dotted border around how to remove this?
And also what property to use to change button style when button is pressed down?
outline: 0;
This is the outline css property. You can set it just like border.
However, the outline property can be beneficial for people tabbing through controls to see which control currently has focus.
As for the second part of your question, this is not possible with CSS alone. You will need to implement some javascript to change the class on mouse down.
This is a little old, but none of these solutions worked for me in Firefox.
I now have a solution to this using Javascript. Just add onfocus="this.blur();" to your asp:Button tag...
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" onfocus="this.blur();"/>
Have you tried adding this to the css style?
border: none;
I want to change the standard "3D" look of the standard asp.net checkbox to say solid 1px. If I try to apply the styling to the Border for example it does just that - draws the standard checkbox with a border around it - which is valid I guess.
Anyway, is there a way to change how the actual textbox is styled?
Rather than use some non-standard control, what you should be doing is using un-obtrusive javascript to do it after the fact. See http://code.google.com/p/jquery-checkbox/ for an example.
Using the standard ASP checkbox simplifies writing the code. You don't have to write your own user control, and all your existing code/pages don't have to be updated.
More importantly, it is a standard HTML control that all browsers can recognize. It is accessible to all users, and work if they don't have javascript. For example, screen readers for the blind will be able to understand it as a checkbox control, and not just an image with a link.
I think the best way to make CheckBox looks really different is not to use checkbox control at all. Better use your own images for checked/unchecked state on-top of hyperlink or image element. Cheers.
None of the above work well when using ASP.NET Web Forms and Bootstrap.
I ended up using Paul Sheriff's Simple Bootstrap CheckBox for Web Forms
<style>
.checkbox .btn, .checkbox-inline .btn {
padding-left: 2em;
min-width: 8em;
}
.checkbox label, .checkbox-inline label {
text-align: left;
padding-left: 0.5em;
}
.checkbox input[type="checkbox"]{
float:none;
}
</style>
<div class="form-group">
<div class="checkbox">
<label class="btn btn-default">
<asp:CheckBox ID="chk1" runat="server" Text="Required" />
</label>
</div>
</div>
The result looks like this...
Simplest best way, using the ASP checkbox control with custom design.
chkOrder.InputAttributes["class"] = "fancyCssClass";
you can use something like that.. hope that helps
paste this code in your css and it will let you customize your checkbox style. however, it's not the best solution, it's pretty much displaying your style on top of the existing checkbox/radiobutton.
input[type='checkbox']:after
{
width: 9px;
height: 9px;
border-radius: 9px;
top: -2px;
left: -1px;
position: relative;
background-color: #3B8054;
content: '';
display: inline-block;
visibility: visible;
border: 3px solid #3B8054;
transition: 0.5s ease;
cursor: pointer;
}
input[type='checkbox']:checked:after
{
background-color: #9DFF00;
}
Why not use Asp.net CheckBox button with ToggleButtonExtender available from the Ajax control toolkit.
Not sure that it's really an asp.net related question.. Give this a shot, lots of good info here:
http://www.456bereastreet.com/archive/200409/styling_form_controls/
Keep in mind that the asp:CheckBox control actually outputs more than just a single checkbox input.
For example, my code outputs
<span class="CheckBoxStyle">
<input id="ctl00_cphContent_cbCheckBox"
name="ctl00$cphContent$cbCheckBox"
type="checkbox">
</span>
where CheckBoxStyle is the value of the CssClass attribute applied to the control and cbCheckBox is the ID of the control.
To style the input, you need to write CSS to target
span.CheckBox input {
/* Styles here */
}
They're dependent on the browser really.
Maybe you could do something similar to the answer in this question about changing the file browse button.
Well, I went through every solution I could find.
The Ajax Control Toolkit works, but it creates a weird html output with all kinds of spans and other styling that is hard to work with.
Using css styling with the ::before tags to hide the original control's box would work, but if you placed runat=server into the element to make it accessible to the code-behind, the checkbox would not change values unless you actually clicked in the original control.
In some of the methods, the entire line for the label would end up under the checkbox if the text was too long for the viewing screen, or would end up underneath the checkbox.
In the end, (on the adice of #dimarzionist's answer here in this page) I used an asp.net ImageButton and used the codebehind to change the image. With this solution I get nice control over the styles and can determine whether the box is checked from the codebehind.
<asp:ImageButton ID="mycheckbox" CssClass="checkbox" runat="server" OnClick="checkbox_Click" ImageUrl="unchecked.png" />
<span class="checkboxlabel">I have read and promise to fulfill the rules and obligations</span>
And in the code-behind
protected void checkbox_Click(object sender, ImageClickEventArgs e) {
if (mycheckbox.ImageUrl == "unchecked.png") {
mycheckbox.ImageUrl = "checked.png";
//Do something if user checks the box
} else {
mycheckbox.ImageUrl = "unchecked.png";
//Do something if the user unchecks the box
}
}
What's more, is with this method, The <span> you use for the checkbox's text will wrap perfectly with the checkbox.
.checkboxlabel{
vertical-align:middle;
font-weight: bold;
}
.checkbox{
height: 24px; /*height of the checkbox image*/
vertical-align: middle;
}