I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
Related
In my web page I have a button. When I display the page in Chrome, everything works fine, but when I look at it in IE, the button text doesn't fit in the button (see image). Do you have a hint, what possibly causes this problem and how to fix it? I'm also using bootstrap v4.0.0.
Here is the code:
.button {
background-color: #002c4c;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
align: center;
width: 100%;
}
.row {
margin-right: 0;
}
.row-8 .col-lg-2 {
max-width: 225px;
}
<div class="row row-8">
<div class="col-lg-2">
<form action="/MyProject/print?language=de" method="post" name="printForm" onsubmit="return validateForm()" target="_blank">
<input type="submit" class="button" name="btn_print" value="PDF generieren">
</form>
</div>
</div>
I was not able to reproduce this error with the code snippet thing even when I put my whole web page & css inside it. I guess it has something to do with the bootstrap columns. I use lg-2 here with a max width of 225px.
After I used the work-around (button instead of input) suggested in the answer I get the above. The button in IE is a bit smaller though it doesn't use up the max-width I defined. If anyone issues the same problem and has found a reason for that, I'd be glad to hear about it. For now, I'll live with the work-around.
I'll already had the issue myselfe that a text overflows a button in IE11.
For me it was a rendering bug connected to fonts.
IE11 seems to render the button on pageload, before webfonts are loaded, when the webfont is loaded the button is not redrawed so it does not adapt to the new width.
The only solution I was able to find is forcing the browser to redraw when webfonts are loaded. Therfore I used an JS called "FontFaceObserver" (https://github.com/bramstein/fontfaceobserver)
JS:
new FontFaceObserver('Roboto', {
style: 'normal',
weight: 400,
}).load(function(){
$('body').addClass('state-font-loaded');
}, 10000);
CSS:
.state-font-loaded {
visibility: visible; //forcing browser to redraw
}
An other try would be to change the input into button like
<button type="submit" class="button" name="btn_print">PDF generieren</button> this could solve sizing issues if they are connected to the input element. (Please also inpect this element to see if there is any fixed or precentage width set)
I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.
Ideas?
To double the size of checkboxes, you can use the CSS scale property. The (2,2) means 2 times the width and 2 times the height of the original, but this will be quite large.
input[type="checkbox"] {
transform:scale(2, 2);
}
You can also use decimal values, for just slightly bigger checkboxes.
input[type="checkbox"] {
transform:scale(1.3, 1.3);
}
This works. It uses relative sizes so it scales with your current font size.
input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
}
You may need to adjust your margins though.
Styling checkboxes is risky business. It's one of those things that never seems to work consistently with all browsers.
or you can try with
style="zoom:1.2"
jQuery offers a plugin to do a replacement on checkboxes
You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.
I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.
input[type=checkbox]:checked ~ div label{
background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
background-size: 100%;
}
input {
display: none;
}
label input[type=checkbox] ~ span {
display: inline-block;
vertical-align: middle;
cursor: pointer;
background: #fff;
border: 1px solid #888;
padding: 1px;
height: 20px;
width: 20px;
}
label input[type=checkbox]:checked ~ span {
/* image: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
background-size: 100%;
}
<label>
Click me:
<input type="checkbox" />
<span></span>
</label>
I think the best you can do is give it a bigger font-size. From there it's up to how the browser handles it unless you make a mock div element that controls a hidden checkbox. It doesn't scale it up that much.
input[type="checkbox"] {
font-size: 50px;
}
I have used this library with sucess
http://plugins.krajee.com/checkbox-x
It requires jQuery and bootstrap 3.x
Download the zip here: https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master
Put the contents of the zip in a folder within your project
Pop the needed libs in your header
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="path/to/js/checkbox-x.min.js" type="text/javascript"></script>
Add the data controls to the element using the data-size="xl" to change the size as shown here http://plugins.krajee.com/cbx-sizes-demo
<label for="element_id">CheckME</label>
<input type="checkbox" name="my_element" id="element_id" value="1" data-toggle="checkbox-x" data-three-state="false" data-size="xl"/>
There are numerous other features as well if you browse the plugin site.
Styling checkbox's is a very wierd world full off cross browser issues. More info can be found here http://www.456bereastreet.com/lab/form_controls/checkboxes/ You can also create your own with javascript but this is not great for user accessibility.
So I would tray an avoid changing if possible.
Simply add background image to checkbox. And adjust the sizes as you prefer.
The code below automatically adds background when it's checked, and the size remains the same with unchecked status.
No need to specify like:
input[type=checkbox]:checked
or
input[type=checkbox]:checked ~ div label
For ex, all checkboxes:
input[type="checkbox"]{
background: url('http://refundfx.com.au/uploads/image/checkbox_full.png');
background-size: 20px;
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin: 0;
}
See fiddle here.
Or simply style it with height and width like this:
<input style="height: 26px; width:26px; margin-left:-30px" value="" type="checkbox">
PS. I have used this with bootstrap and the "checkbox-inline" class
input.icon
{
border: 0;
cursor: pointer;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
text-indent: -1000em;
}
input.edit {
background: transparent url('/edit.png') no-repeat center top;
}
On an element like:
<input type="submit" class="icon edit" onclick="...." />
It renders fine in firefox, without the text on the image also. In IE it shows the text of the value attribute.
Why is that?
Actually i'm not even setting the value attribute and it is defaulting to 'submit query'.
Also, I thought my CSS could be more specific by doing:
input.icon {
...
}
input.icon .edit {
...
}
But that didn't work for me not sure why, so I changed the 2nd definition too:
input.edit {
..
}
Why didn't input.icon .edit work?
Could I just as well put these styles on a div element? What's the difference?
You've got a few questions there. For the first one. I'm not seeing the issue in IE8:
http://jsfiddle.net/rfYrq/
I do not see the text in IE8.
Question 2: "Why didn't input.icon .edit work?"
The meaning of input.icon .edit is, any element with the class of edit within an input element with a class of icon. What you really wanted was any input with both the edit and icon classes. That would be like this:
input.icon.edit
Question 3: "Could I just as well put these styles on a div element?"
Yes. If you are overriding the style of the button with your own css and apparently overriding the functionality of the button with an onclick, you can just use a div or a span or some other element depending on your situation.
I'm trying to style my form buttons and I'm experiencing a problem in Firefox that I can't get to the bottom of...
I want to style certain <a />s and <input type="submit" />s to look the same (I have a button background image, using a sliding-doors technique to apply a hover effect.)
This all works great, except in Firefox, the input submit text is slightly lower down than it should be. IE and Safari/Chrome work fine.
(source: muonlab.com)
Anyone got any ideas?
Thanks
<div class="buttons">
« Back
<input type="submit" class="button btn-large-green" value="Save changes" />
</div>
.button
{
cursor: pointer;
border: 0;
background-color: #fff;
color: #fff;
font-size: 1.4em;
font-weight: bold;
outline: 0;
font-family: Arial, Verdana, Sans-Serif;
}
a.button
{
display: block;
float: left;
text-align: center;
text-decoration: none;
padding: 5px 0 0 0;
height: 22px;
margin-right: 1em;
}
.btn-small-grey
{
height: 27px;
width: 96px;
background-position: 0 -81px;
background-image: url(/assets/images/buttons/buttons-small.gif);
}
.btn-large-green
{
height: 27px;
width: 175px;
background-position: 0px -54px;
background-image: url(/assets/images/buttons/buttons-large.gif);
}
I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
I hope this helps.
I have same problem every time I need to style form buttons. Sorry, quite busy at the moment so only brief description how I usually fix it.
In FF Text is usually a bit lower, exactly like on the image you attached and so then I simply apply "padding-bottom" on the button itself. It moves the text on the button number of pixels up.
The problem is it also moves text in IE and now IE looks a bit off. To fix that I apply "line-height" to the same button with exactly same value as the height of the button. That makes IE to ignore padding completely and positions the text right in the middle. Below is sample HTML code:
<input type="submit" value="SEARCH" class="search"/>
and CSS:
.search
{
background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
height: 29px;
width: 104px;
border: 0;
/* centering text on button */
line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
padding-bottom: 2px; /* IE will ignore but works for FF */
}
Sorry I didn't applied it directly to your code but I'm a bit busy at the moment, hope you got the idea and it helps though.
ps. just checked in IE8 and all above moves text few pixels up. So it means more (endless?) mocking around with padding top/bottom.. I lost my patience now though and I think I'll be putting all this in separate stylesheet from now on that is until I find some fairly easy and universal solution for all this
Inputs are formatted not following the W3 box model convention in different browsers, you might want to include:
input /*Content follows box model*/
{
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
height:24px;
}
Also include for firefox (which Shelly pointed out):
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
Otherwise you could use button
I collected all these solutions from various sources, they deserve the credit
I had the same problem and I've solved (only for FF and Safari) by fixing the width but not the height and playing with the values: padding (top and bottom), line-height and if needed setting the vertical-align to middle. However all it's more easy to do if you set all the values (even the font size) in pixel.
EDIT: I think that there isn't a cross-browser solution, because the problem is due to the text rendering of the browsers. To solve completely the problem you could draw a background img with text and apply that image to the link or the button.
Even if with this solution you lose in accessibility.
Alternatively you can use conditional CSS statements to improve the layout for each browser.
You could also consider replacing the the button with a different element altogether. The anchor element works perfectly. Just add a 'submit' function to it's 'onClick' event and you'll be good to go. I think this is a better (and simpler) cross browser solution.
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.