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.
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" />
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
this is my first question asked here a stack overflow.
I have a problem that has been bugging me for a bit now.
When I have a page loaded with multiple buttons on the page the first button in the HTML Markup seems to get this think border around the button.
I'm sorry if this has been asked before but I've read many forums that are related to this issue but so far have been unsuccessful with combating this issue with suggestions that address this issue. I am guessing it has something to do with the focus of the button on page load, for usability when pressing a keyboard button.
I was hoping that there is a way to style this button when is focus mode for IE 7 and above either through javascript or in this code behind. I am using VB.net but would greatly appreciate C# example's if the code behind is the way to go.
Any help would be greatly appreciated.
Thanks Jake
Try applying a CSS style for the button with the :focus pseudo class, which may allow to change the style of the button. Don't know if that's supported in all major browsers.
http://www.w3schools.com/CSS/pr_pseudo_focus.asp
You could try wrapping the button in a span, giving the span the border and removing it from the button?
Style:
<style type="text/css">
.span-button INPUT { background-color: transparent; border-width: 0px; }
.span-button { background: Silver; border: 1px solid red; }
</style>
Html:
<span class="span-button"><input type="button" value="wrapped button" /></span>
If you mean by thick border: the default highlighting performed by IE for the first submit button found on the form, then check this : Stopping IE from highlighting the first submit-button in a form
Use either of these CSS Styles
a:active, a:focus,input, input:active, input:focus{ outline: 0; outline-style:none; outline-width:0; }
a:active, a:focus,button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
{ border: none; }
OR
:focus {outline:none;} ::-moz-focus-inner {border:0;}
Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
</customHeaders>
</httpProtocol>
</system.webServer>
I am implementing a design that uses custom styled submit-buttons. They are quite simply light grey buttons with a slightly darker outer border:
input.button {
background: #eee;
border: 1px solid #ccc;
}
This looks just right in Firefox, Safari and Opera. The problem is with Internet Explorer, both 6 and 7.
Since the form is the first one on the page, it's counted as the main form - and thus active from the get go. The first submit button in the active form receives a solid black border in IE, to mark it as the main action.
If I turn off borders, then the black extra border in IE goes away too. I am looking for a way to keep my normal borders, but remove the outline.
Well this works here:
<html>
<head>
<style type="text/css">
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background:none;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<span class="button"><input type="button" name="..." value="Button"/></span>
</body>
</html>
if you dont want to add a wrapper to the input / button then try doing this. As this is invalid CSS then make sre its for IE only. Have the border as per for other browsers but use the filter:chroma for IE...
<!--[if IE]>
<style type="text/css">
input {
filter:chroma(color=#000000);
border:none;
}
</style>
<![endif]-->
worked for me.
I know I'm almost 2 years late to the game, but I found another solution (at least for IE7).
If you add another input type="submit" to your form before any other submit button in the form the problem will go away. Now you just need to hide this new, black-border-absorbing-button.
This works for me (overflow needs to be "auto"):
<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />
Note: I am using an HTML5 doctype (<!doctype html>).
I've found an answer that works for me on another forum. It removes the unwanted black border in ie6 and ie7. It's probable that some/many of you have not positioned your input="submit" in form tags. Don't overlook this. It worked for me after trying everything else.
If you are using a submit button, make sure it is within a form and not just a fieldset:
<form><fieldset><input type="submit"></fieldset></form>
I was able to combine David Murdoch's suggestion with some JQuery such that the fix will automatically be applied for all 'input:submit' elements on the page:
// Test for IE7.
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('<input type="submit" value="" style="height:0;overflow:auto;position:absolute;left:-9999px;" />')
.insertBefore("input:submit");
}
You can include this in a Master Page or equivalent, so it gets applied to all pages in your site.
It works, but it does feel a bit wrong, somehow.
I'm building on #nickmorss's example of using filters which didn't really work out for my situation... Using the glow filter instead worked out much better for me.
<!--[if IE]>
<style type="text/css">
input[type="submit"], input[type="button"], button
{
border: none !important;
filter: progid:DXImageTransform.Microsoft.glow(color=#d0d0d0,strength=1);
height: 24px; /* I had to adjust the height from the original value */
}
</style>
<![endif]-->
Right, well here's an ugly fix for you to weigh up... Stick the button in a <span>, nuke the border on the button and give the border to the span instead.
IE is a bit iffy about form element margins so this might not work precisely. Perhaps giving the span the same background as the button might help in that respect.
span.button {
background: #eee;
border: 1px solid #ccc;
}
span.button input {
background: #eee;
border:0;
}
and
<span class="button"><input type="button" name="..." value="Button"/></span>
The best solution I have found, is to move the border to a wrapping element, like this:
<div class='submit_button'><input type="submit" class="button"></div>
With this CSS:
.submit_button { width: 150px; border: 1px solid #ccc; }
.submit_button .button { width: 150px; border: none; }
The main problem with this solution is that the button now is a block-element, and needs to be fixed-width. We could use inline-block, except that Firefox2 does not support it.
Any better solutions are welcome.
I think
filter:chroma(color=#000000); as metnioned a wile ago is the best as you can apply in certain class. Otherwise you will have to go and apply an extra tag on every button you have that is if you are using classes of course.
.buttonStyle {
filter:chroma(color=#000000);
BACKGROUND-COLOR:#E5813C solid;
BORDER-BOTTOM: #cccccc 1px solid;
BORDER-LEFT: #cccccc 1px solid;
BORDER-RIGHT: #cccccc 1px solid;
BORDER-TOP: #cccccc 1px solid; COLOR:#FF9900;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px; FONT-WEIGHT: bold;
TEXT-DECORATION: none;
}
That did it for me!
I had this problem and solved it with a div around the button, displayed it as a block, and positioned it manually. the margins for buttons in IE and FF was just too unpredictable and there was no way for them both to be happy. My submit button had to be perfectly lined up against the input, so it just wouldnt work without positioning the items as blocks.
This is going to work:
input[type=button]
{
filter:chroma(color=#000000);
}
This works even with button tag, and eventually you can safely use the background-image css property.
The correct answer to this qustion is:
outline: none;
... works for IE and Chrome, in my knowledge.
A hackish solution might be to use markup like this:
<button><span>Go</span></button>
and apply your border styles to the span element.
add *border:none
this removes the border for IE6 and IE7, but keeps it for the other browsers
With the sliding doors technique, use two spans inside of the button. And eliminate any formatting on the button in your IE override.
<button><span class="open">Search<span class="close"></span></span></button>
I can't comment (yet) so I have to add my comment this way. I thing Mr. David Murdoch's advice is the best for Opera ( here ). OMG, what a lovely girl he's got btw.
I've tried his approach in Opera and I succeeded basically doubling the input tags in this way:
<input type="submit" value="Go" style="display:none;" id="WorkaroundForOperaInputFocusBorderBug" />
<input type="submit" value="Go" />
This way the 1st element is hidden but it CATCHES the display focus Opera would give to the 2nd input element instead. LOVE IT!
At least in IE7 you can style the border althogh you can't remove it (set it to none).
So setting the color of the border to the same color that your background should do.
.submitbutton {
background-color: #fff;
border: #fff dotted 1px;
}
if your background is white.
For me the below code actually worked.
<!--[if IE]>
<style type="text/css">
input[type=submit],input[type=reset],input[type=button]
{
filter:chroma(color=#000000);
color:#010101;
}
</style>
<![endif]-->
Got it from #Mark's answer and loaded it only for IE.