Is there a way I can change the appearance of a TextBox from its default look to look like this
I searched for creating a custom TextBox but didnt see anything about changing how it looked.
I have the have the image in a PSD i just didnt know if there was a way to replace the default look with this image
I am new to making websites and just using this for learning purposes so I dont really know where to start
You should use CSS to achieve this. What you need to do is to style it. Here are some nice examples that could help you.
Here is the one that shows how to add background image:
.tb11 {
background:#FFFFFF url(images/search.png) no-repeat 4px 4px;
padding:4px 4px 4px 22px;
border:1px solid #CCCCCC;
width:230px;
height:18px;
}
You can create a custom asp.net text box control and wrap oob asp.net text box with necessary html (a label or span) and css to style it like the way you want. That control will become reusable and you would be able to use it on any of your pages.
If you want an easy way to do it, just load easy to use bootstrap framework and include the needed file to your project.
Than just add the right class to your control and here it is !
Also, the docs is really complete and simple
http://getbootstrap.com/components/#input-groups
An asp.net TextBox is really just an input with the type="text".
You can do something like this using stylesheets:
CSS:
input[type=text].styled1
{
background: url(http://myUrl.com/Username.jpg);
border:0;
color: gray;
height: 23px;
padding-left:10px;
width: 200px;
}
XHTML:
<asp:Textbox id="txtUsername" runat="server" CssClass="styled1" />
Related
Is it possible to change the layout of a checkbox without adding the label tag in CSS?
Things like this do not have any effect:
input[type=checkbox][disabled] {
background-color: green;
border: 10px solid red;
}
The only thing I found so far is how to change the opacity.
I'm not sure if this will be much use to you, but it does allow you to "style up" a checkbox without the need for a label. I've remove the disabled flag so you can swap between the different styles. Shouldn't be difficult to add it back in if this will work for you.
Fiddle is here.
input[type=checkbox]:checked:before {
background-color: green;
border: 10px solid red;
}
input[type=checkbox]:before {
content:'';
display:block;
height:100%;
width:100%;
border: 10px solid green;
background-color: red;
}
The above only works on Chrome, however, it seems like Chrome is in the wrong where the specification is concerned.
A fuller answer here: CSS content generation before or after 'input' elements
As of today there is no solution, if we assume a cross browser functional styling, to style the <input type="checkbox" > alone, other than a few properties like opacity, width, height, outline (and maybe a few more).
Using a label (or other content elements) is what you need to do that and here is a good (which this question is likely a duplicate of) post with lots of options: How to style checkbox using CSS?
Note: If you know more properties, feel free to update this answer.
The main difference between Theme/Skins and CSS are the HTML & Server Side Controls (SSC) only. We use Skin files to format & cosmetics SSC which are not in HTML like <asp:Label>, <asp:TextBox> & </asp:RadioButtonList> etc...
BUT what if we use the rendered HTML SSC in CSS instead Skin files to handle <asp:Label> & <asp:TextBox> etc... ie: when SSC <asp:TextBox> rendered on browsers it shows <input type="text"> so if we write following style in my CSS file instead Skin, it also works...
input[type=text], textarea, select
{
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #cccccc;
background: #ffffff;
width: 150px;
color: #484848;
font-size: 12px;
}
So my question is, if we STILL can handle SSC with CSS do we REALLY need SKINS? Or if I am missing anything please correct me, thanks.
webforms concentrates on server side processing. When webforms was first introduced it favored styling controls via control properties rather than CSS. I tend to think of skins as CCS-like styling for server side controls. You can even have the skin set the CssClass property.
CSS has improved since 2001 and, IMO, skins provide less and less value. So do you need skins, no. Do they provide value? You would have a difficult time convincing me :)
Wondering if there is a way to have multicolor text for ASP.NET Button Text.
Or what is the best way to have multi-styled text e.g. bold, red-color + normal black color text for ASP.NET button?
One way I know is creating an Image and use ImageButton, which I plan to do if I don't find any other better way.
Any other ways?
Updated:
Why need??
1: The button has little informative message and part of the text needs to be differnt for emphasizing.
2: Not my choice.
One way I figured out: is using a LinkButton. I'll post my solution once ready.
I believe the XHTML schema allows you to do:
<button><span>Hello</span> <span>World</span></button>
Which you can style accordingly with CSS.
.button span { color: red; }
.button span:first-child { color: blue; }
For an ASP.NET button, you could probably write the someting similar, but realistically it is not a great UX recommendation. If you can keep to a consistent UI, or try to follow the UI guidelines outlined by the parent OS, the user will be more familiar and comfortable.
Here's my solution:
.btndiv
{
border-style: outset;
background-color: Lime;
color: Black;
width: 200px;
height: 50px;
text-align: center;
}
.btndiv a
{
text-decoration: none;
color: black;
}
<p class="btndiv">
<asp:Linkbutton id="LinkButton1" runat="server">
<span style="color:Red;font-weight:bold">Welcome Back! </span><br />
<span> Click to Enter the site.</span>
</asp:Linkbutton>
</p>
Have you considered using an <a> tag instead of a button,
and then calling any function on the click event of the tag?
Particletree (written by the guys behind Wufoo forms) has an
informative article about styling buttons.
http://particletree.com/features/rediscovering-the-button-element/
Are you sure you want button text with multiple styles?
Do you have examples of a well-designed button that has
multiple text styles? (I ask because I don't recall ever seeing one...)
For reference:
Apple Mac UX guidelines and buttons:
http://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/XHIGControls/XHIGControls.html#//apple_ref/doc/uid/TP30000359-TPXREF186
Windows Vista UX guidelines and command buttons:
http://msdn.microsoft.com/en-us/library/aa511453.aspx
I want to use this pure HTML/CSS template for my ASP.NET website:
http://sub3.tanguay.de
I copy it inside my Default.aspx page, inside the FORM element, but the form messes up the layout:
http://sub2.tanguay.de
UPDATE: this now displays correctly, thanks to Devio.
I tried altering the style of the form tag but can't get it to stop affecting the layout, I tried:
style="margin: 0px; padding: 0px; display: inline; background-color: transparent;"
Is this a common issue when copying in layout templates into ASP.NET?
Is there an easy work around, like some margin:-2px fix or something like that?
I need to keep the form tag, of course, for the ASP.NET functionality.
I had the same issue and changing the form element to the following fixed things:
<form id="form1" runat="server" style="display: inline; background-color: transparent;">
1) try removing the background-color attribute from the form class:
form {
margin:10px; padding: 0;
border: 1px solid #f2f2f2;
background-color: #FAFAFA; /* remove this */
}
2) you cannot nest forms, but the searchform is contained inside the ASP.Net form, and ASP.Net requires exactly one form tag per page.
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;
}