I am using the following to show a <button> for my form.
<button id="btnSend" type="submit" style="width: 100%; height:38px; text-indent:-9999px; border:none; margin-top:20px; cursor:pointer; background-color: blue;">
Send
</button>
I want to know how can I set the font color for it? I tried font-color and color but neither worked for me.
Your text is being moved all of the way off of the page with the text-indent property, so even if you had a color on the font you wouldn't be able to see it.
So remove text-indent: -9999px and then add a color - color: #fff or whatever color you'd like.
JS Fiddle Demo
Also you are better off defining your styles in CSS rather than inline styles. So your updated CSS might look like:
#btnSend{
width: 100%;
height:38px;
border:none;
margin-top:20px;
cursor:pointer;
background-color: blue;
color:#fff
}
you can try this one
<button id="btnSend" type="submit" style="width: 100%; height:38px; border:none; margin-top:20px; cursor:pointer; background-color: blue;">
<font style="color:cyan">Send</font>
</button>
Related
I'm not sure how to deal with anything(except images) that is used for design/decoration only in terms of accessibility. For example, if in case like this I'll use an image, I'd simply use alt="" or use CSS background image, so the AT for example will ignore it. But what if I'm using some <div> or anything else? It can be a div with some CSS styling that is presented in a code-way, instead of image, or it can be some text with CSS styling so it will be just for decoration(instead of images), or really, anything else. How should I mark it so it will be ignored in a proper way by AT?
Simple example(for request):
<div><span>For Decoration</span></div>
div{
width:0; height:0;
border-bottom:116px solid #009;
border-left:500px solid #900;
margin:0 auto;
}
div span{
display:block;
position:absolute;
margin:0 auto;
left:0;
right:0;
width:150px;
color:#fff;
}
There are two solutions to this:
1) if you are using an empty tag such as a div with no text in it, the screen reader will ignore it automatically. You don't need to do anything in particular.
2) if you are using a tag with text inside you should: a) give it an aria-hidden="true" if you don't want the screen-reader to read the text or b) give it a role="presentation" if you do want the screen-reader to read the text but not announce it as a particular type of element.
-------------------
Based on the comments on this post I have added code below showing an example. It shows when you wouldn't need to do anything (the first and last div) and when you would want to use aria-hidden and role="presentation".
The top line is purely for decoration. Part of it is empty divs and part of it is text. The different words for "Hello" in the p tag should be seen but don't need to be read since they're purely ornamental which is why I am using role and aria-hidden on it.
.end {
display: inline-block;
width: 5%;
height: 20px;
border: 5px solid transparent;
}
.end-left {
border-left-color: #999;
border-top-color: #999;
}
.end-right {
border-right-color: #999;
border-top-color: #999;
}
.languages {
display: inline-block;
width: 80%;
text-align: center;
font-family: 'copperplate', 'century gothic';
color: #999;
}
.languages span {
display: inline-block;
width: 15%;
}
<div class="end end-left"></div>
<p class="languages" aria-hidden="true" role="presentation">
<span class="english">Hello</span>
<span class="french">Bonjour</span>
<span class="italian">Ciao</span>
<span class="spanish">Hola</span>
<span class="hinid">Namaste</span>
<span class="persian">Salaam</span>
</p>
<div class="end end-right"></div>
<h1>Languages</h1>
<p>Welcome to your first language lesson. You will learn how to speak fluently.</p>
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.
I'm using a sprite as an input button. It works fine in Firefox and > IE8. However, in IE7&8, the ID value shows over the png graphic. It looks like this:
(I would embed, but I'm not allowed): Pre-Hack Sprite
I went through and found a hack for this, minimizing the font size and line height.
font-size:0px; /*IE7-8*/
line-height:0px; /*IE7-8*/
This then created what almost looks like a scratch over the button:
Post-Hack Sprite
Any ideas? Here's my HTML:
<form action='memberSelection' method='post'>
<div id="providersearchopt1">
...
<p class="left"><input class="btnsearch" type="submit" id="formSubmit" name="formSubmit" /></p>
Here's the CSS:
input[type="submit"].btnsearch {
width:96px;
height:27px;
background-color:transparent;
background-position:0px 0px;
background-image:url(images/btn-search.png);
cursor: pointer;
border: none;
color: transparent;
font-size:0px;
line-height:0px;
}
input[type="submit"].btnsearch:hover {
background-position:0px -27px;
background-image:url(images/btn-search.png);
}
EDIT - SOLUTION:
Change in CSS:
line-height: 100px; /*IE7-8*/
font-size: 0px: /*IE7-8*/
This will then work in both FF and IE.
You can use type="image", I think hover works on that too with js I forgot really.
or you can make the button using anchor and use JS to submit
Is it possible to make an input HTML element with a value make to look just like a text in a div using CSS? Make the border disappear and make the background color of the input same as the page backgound color.
If I understand correctly: yes.
See: http://jsfiddle.net/zaK7j/
Test CSS:
input, div {
border: 0;
padding: 0;
margin: 0;
background: transparent;
font: 13px sans-serif
}
HTML:
<input type="text" value="Yes." />
<div>Yes.</div>
input[type=text], textarea {background:none;border:0;padding:0;margin:0;}
Will reset your input and also your textarea.
Edit: Note that this works in IE7 and above.
You could use the CSS
input{
border: none;
}
Your htlm like this i presume :
<div>
<input type="text" value="some text"/>
</div>
And your css :
div {
background-color: olive;
}
input[type=text] {
border: none;
background-color: olive;
}
I have a button as made for you to see here. Looks fine,right? Well on the live site, euroworker.no/shipping and /selectAddress it seems stretched.
Renders fine in Chrome, IE and Safari, I thought it might have been a FF issue, but loaded the fiddle into FF and seems fine.
Quick ref CSS and html:
#fortsett_btn {
background-image: url(http://euroworker.no/public/upload/fortsett.png?1269434047);
background-repeat:no-repeat;
background-position:left;
background-color:none;
border:none;
outline:none;
visibility: visible;
position: relative;
z-index: 2;
width: 106px;
height: 25px;
cursor:pointer;
}
And HTML
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value=""> </button>
I wonder what's up with it.
Instead of
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value=""> </button>
Try this :
<button type="submit" class="submit" id="fortsett_btn" title="Fortsett" value="">Some value</button>
then add text-indent:-999px; to your CSS
This has nothing to do why your button is unaffected on live site, its just suggestion. You button doesn't style probably because you're missing a style sheet(wrong link), try styling it inline, then if it works copy the style to the style sheet
I'm not sure I understand the problem. The CSS is different in each case. On Fiddle you have a single image with a background-repeat set to no-repeat. On the live site you have a slice of a different image with background-repeat set to repeat-x. Those are two different ways of styling the button.
Fiddle:
#fortsett_btn {
background-image:url("http://euroworker.no/public/upload/fortsett.png?1269434047");
background-position:left center;
background-repeat:no-repeat;
border:medium none;
cursor:pointer;
height:25px;
position:relative;
visibility:visible;
width:106px;
z-index:2;
}
Live:
#product___specField_8 {
-moz-border-radius:5px 0 0 5px;
background-image:url("stylesheet/frontend/../../upload/orng_bg.png?1269434608");
background-repeat:repeat-x;
border:1px solid #DDDDDD;
float:left;
font-size:24px;
font-weight:bold;
height:33px;
padding-left:55px;
width:124px;
}
Why wouldn't you expect to see something different?