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
Related
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
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" />
I have a button like so:
<button>Click Me</button>
I want to make that button linked with an href. Is it compliant HTML to wrap the button in a tag or to put the tag inside of the button to make it linkable?
Thanks
You may just want to use a link itself and style it like a button. You can still add an onclick, but it makes linking to a new page really easy.
a.button{
color: #000000;
text-decoration: none;
display: block;
background: #FFFFFF;
border: solid 1px black;
}
A less appealing (though commonly used) method is to wrap a link around an image.
<img src="/images/button.png"/>
I think the correct way would be to put the button in a form, and set the form's action attribute to the page you want to link to and the button's type attribute to submit.
e.g.
<form action="nextpage.html" method="get">
<button type="submit"> Next </button>
</form>
how can fix the bugs of button which look's different in two different browser(IE,MOZILLA).
You can't unless you use an image for the button.
You are asking something similar to making your applicaiton loko the same on XP and Windows 7 - there are certain things you can't change without breaking the standard control contracts.
You can apply CSS styles to the input element to make it ignore any browser/operating system looks.
Here's a simple example, this should appear in your head element:
<style type="text/css">
#btn { border: solid 1px #693ace; background-color: #cecece; color: #ffffff; }
</style>
And the button's HTML:
<input id="btn" type="button" value="Styled button" />
This site has some good examples.
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;
}