I want to make the button caption bold. But it should not affect the width of the button. i tried font-weight it changes the width of the button.
<input type="button" style="width:10px" class="buttonEnabled">
<input type="button" style="width:20px" class="buttonEnabled">
.buttonEnabled:hover {
font-weight:bold;
}
If you do not want to fix widths or you have multiple width inputs, then you could simulate a faux bolder text by using text-shadow only on hover.
Use 0 for x and y offsets to make the shadow outline the text. Tweak the color to reduce or increase the impact.
Example Snippet:
.buttonEnabled:hover { text-shadow: 0px 0px 1px #333; }
<input type="button" class="buttonEnabled" value="Submit">
Edit: This works in all modern browsers, but will not work with IE < 10.
For old IE, you could use the shadow filter with standard text-shadow as the last rule. Something like this:
.buttonEnabled:hover {
filter: progid:DXImageTransform.Microsoft.Shadow(
color=#333,direction=0,strength=1
);
text-shadow: 0px 0px 1px #333;
}
I haven't tested it though. You may need to tweak it out. More details of this legacy rule is here: https://msdn.microsoft.com/en-us/library/ms533086(v=vs.85).aspx
You can do this (set a min-width):
CSS
.buttonEnabled{
min-width: 100px;
}
.buttonEnabled:hover {
font-weight:bold;
}
HTML
<input type="button" class="buttonEnabled" value="teste">
DEMO HERE
Related
I'm trying to align a submit button (input type="submit") with a text input (input type="text") but in Chrome the submit button is always slightly smaller.
Here's the HTML:
<input type="email" placeholder="Secret Sale ♥ Enter your email" name="MERGE0" class="email" size="22" value="">
<input type="submit" class="button" name="submit" value="Join">
And here's the CSS:
#header-top .newsletter .email, #header-top .newsletter .button { font-size: 12px; line-height: normal; box-sizing: border-box; padding: 5px; }
As you can see I've tried setting the padding and line-height to be the same for both elements, and after reading around on Stackoverflow I've seen references to setting the box-sizing too which unfortunately hasn't made any difference.
Here it is in IE (fine):
And in Firefox (also fine):
And finally in Chrome (button too small, or text input too big?):
Here's the live site if it helps too: http://www.arabel.co.uk/about-arabel/faqs
Any help with this would be much appreciated, I'm completely stumped as to why it's bigger in Chrome. Thanks!
Chrome is adding a default 2px border to your textbox due to some reason. Your text box and button both have the same padding, but the text box has a 2px border and the button has a 1px border. A quick fix would be to add an individual padding of 5px to ".email".. everything looks a okay. If you change it in the common css line, then both items will get the padding, and they will still be skewed.
#header-top .newsletter .email{
padding: 4px;
}
And make sure you add this after the line that defines the css for both .email and .button, so that this will overwrite the 5px padding.
Alternatively, you can also do away with that combined css altogether and add individual padding or 4px for .email and 5px for .button
Likely hasn't something to do with browser default styles.
You could try including a reset.css in your page.
http://meyerweb.com/eric/tools/css/reset/
It could have unattended effects else where though.
I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.
input[type="checkbox"]{
width: 20px;
height: 20px;
border: 1px solid #59A29B;
background color: #FFFFFF;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
Example of it not working.
JS Fiddle
Thanks in advance.
Firstly, this is invalid markup:
<input type="checkbox" value="" id="test">
Option one
</input>
This is valid markup:
<label>
<input type="checkbox" value="" id="test" />
Option one
</label>
Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?
Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).
A quick alternative to border here would be to use outline, but this isn't very desirable:
#test{
outline: 1px solid #f00;
}
JSFiddle demo.
Those super IE troubleshooters out there. Here is the bug. At the bottom of this form: http://xquives.kiaistudio.com/new-form/index.php there are two buttons. They appear perfect in IE10 FF etc., but not in IE 9-8-7. How do I fix this?
buttonbox css:
#buttonbox {
display : block;
margin-top:20px;
margin-bottom : 20px;
overflow:auto;
float:right;
}
button class css:
.button {
background:#5f6156;
background:rgba(0, 0, 0, 0.6);
color:#FFF;
padding: 5px;
float: left;
width: 100px;
border: 1px solid #000;
font-size: 12px;
font-weight: bold;
margin:10px;
display:block;
height:30px;
}
.button:hover {
color:#D3411F;
}
button div html:
<div id="buttonbox">
<input name="SOUMETTRE" type="submit" class="button"/>
<input name="REINITIALISER" type="reset" class="button" />
</div>
--
more info, the button in IE 7-8-9 that are useless are black with no text (or black text) so we dont see the writing... but trigger the post from OK .... just cannot see the text that IS there in FF or IE10
--
Here is a multiple screen capture to SUM it up !
The input tag needs to have a value attribute to tell the browser what text to display – Cody Guldner Mar 22 at 20:34
Although I can't see all of the code because the link is broken, I would assume that you have inserted the text into the input by some sort of pseudo-class, such as :before or :after. I know this, because
You don't have a value attribute on your input
You must be using something that isn't supported in lower browsers
So it probably isn't jQuery, because that has good browser support
So to solve this, all you need to do is add a value to the input. This will assure that the text is always displayed, because it is hard-coded into the HTML.
The buttons will still have their functionality. Its just that nobody will know what they do/
First question...
I'm having trouble getting ANY of the Drop down menu/Input Select's to appear with size 18 font in Safari.
Works fine in FF.
Code:
<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>
Css:
.form input{
font-size:18px;
margin-bottom:0px;
}
Any ideas? Can view live at [http://www.motolistr.com][1]
Best,
Nick
EDIT 1:
Thanks for the quick reply. I added a style to the select itself to avoid confusion. I tried;
<select name='make' style='font-size: 18pt;'>
</select>
And
<select name='make' style='font-size: 18px;'>
</select>
And
<select name='make' style='font-size: 1.3em;'>
</select>
Still not working in SAFARI...Again FF works fine with all 3.
Best,
Nick
To style a select in Safari you first have to turn off the os styling:
select {
-webkit-appearance: none;
}
Funny thing though: If you change the background- or border-properties on your select Safari will all of a sudden also apply your font-size.
I figured out a way that safari will pick up on font-size ... all you need to do is set a border color, like the following.
-webkit-appearance: none; will make you lose all of safari's attributes, like the arrows... below you can increase the size without losing that.
Will Work in Safari
<select style=" font-size: 3em; border: black;">
<option>TEXT</option>
</select>
Won't Work in Safari
<select style=" font-size: 3em;">
<option>TEXT</option>
</select>
It appers select controls are non-stylable in Safari; it always uses its own OS X-style widget drawing routines to display them. Until recently, this was the norm: browsers would typically use plain OS-provided widgets for form fields. CSS2 doesn't really say how styles should apply to form fields (if at all).
Some browsers today apply the select's font style to the options (IE7, Opera); some allow the on-page select and the pop-up options to be styled differently (Mozilla, Chrome), so the best you can do for consistency is:
.form select, .form option {
font: Whatever 18px;
}
But if you absolutely need a stylable drop-down in Safari you will need to write your own clunky ersatz-select in JavaScript. (Or see one of the many existing scripts and framework plugins that do this.)
First off this
.form input{
font-size:18px;
margin-bottom:0px;
}
will not work because you are not styling the select element you are styling input elements. Try this and it will most likely work.
.form select {
font-size:18px;
margin-bottom:0px;
}
At least in Safari 5.1 (I don't have 3 running anymore) you can turn off the default styling with:
select{-webkit-appearance: none}
Then it will conform to your font sizing.
The select technically isn't an input tag. Try assigning a class to your select and set the style for the class.
EDIT: Turns out that Aqua style selects only have three different font sizes available. If you need to set an exact font size, you can turn off Aqua by giving the item a background color, then set the size. FYI, it appears that 20px works without setting the background so it must size up to the next supported Aqua size.
Reference: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/. Test page with various styles at http://particletree.com/examples/safari3/drop.html.
<select name='make' class='big-input'>
</select>
.big-input
{
background: #fff; // turns off Aqua
font-size: 18pt; // assuming you meant 18pt, not 18px
margin-bottom: 0px;
}
Setting line-height:100% will constrain the height of the select box for a more consistent look, but it still doesn't affect the actual font size.
In some cases it can help:
select {
-webkit-appearance: menulist-button;
font-size: 30px;
}
I found a way of changing the font size of a select element in Safari through the use of percentages.
Your code then becomes:
<select name='make' style='font-size: 120%;'></select>
For a 13px font size (which I found very appealing).
This is tested in Safari 5.1.3
You can target Safari select tag by doing this:
select {
width: 224px;
line-height: 1.8; (This can be in px too)
}
try this
<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }
#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF;
}
</style>
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.