I have three HTML buttons and when I click on them there is no outer glow and they don't do anything.
I have also tryed to style them but they stay with the default design. I have just used ordinary code I just don't have a clue what's wrong with them
<input type="button" value="Proceed">
<input type="button" value="Cancel">
Don't use , instead use with CSS to create your buttons so they react to touch. It'll require some javascript as even most mobile browsers don't properly map touch events to the CSS :active pseudoclass.
Your "button":
<a class="button" id="yourButton">Button</a>
Some very basic CSS to toggle the background and text color on touch:
a.button {
color:#fff;
border:0px;
padding:5px;
background:#000;
}
a.button-active {
background:#fff;
color:#000;
}
And here's the javascript you would call in your onload on deviceready handler. I'm using xuijs here (xuijs.com), but you can use jQuery or any other javascript to add and remove classes:
x$('.button').on('touchstart', function(e) {
x$(e.currentTarget).addClass('button-active');
} );
x$('.button').on('touchend', function(e) {
x$(e.currentTarget).removeClass('button-active');
} );
This is a very basic example. Once you have this all setup, you can make any changes you want to the CSS to determine how the button will look when it is active and inactive.
Hmmm.. Your question is not that clear. But if you only want a glow in your buttons, you can take a look at how Formalize does it.
Here's a page showing the button glow effect (when pressed).
Update:
Oooops, sorry, missed the "PhoneGap" part. The solution I gave above is only for normal html forms, I don't have experience with using phonegap yet. cheers. :)
Related
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.
Does anybody know a way to input:focus an element only on first click?
<style>
input[type='text'].error:focus{border-color:#f00}
</style>
So, if the user "focus out" it returns to the original border color.
Thanks in advance for any hint.
Edit
I wasn't sure at all. Thanks #blender.
I think the easist way to do it is using jquery or similar, right?
I am confused as to what you mean by "only on first click". If you want to style an input on click, you can just use this CSS:
input[type="text"].error:focus { border-color: #f00; }
And this HTML:
<input type="text" class="error" />
That will style the input border given it has the class of error (if you are adding/removing the class dynamically that is).
However, if you are styling for errors (like if the user hasn't filled out the form), you might want to try something like this:
input[type="text"]:invalid { border-color: #f00; }
input[type="text"]:valid{ border-color: #; } //If form is filled in
Then in your HTML:
<input type="text" required />
Does that help answer your question a little bit?
As #Blender said, it does not seem possible in pure CSS.
I would suggest to handle focusin and focusout events to add a class to an element and use data- attributes to get if element was already clicked or not.
Have a look at this jsFiddle.
For all who have the same or a similar question, here's is a possible jQuery solution:
$('input').on('focusout',function(){
$(this).removeClass('error');
});
This will remove the error class on :focus out.
When the user :focusin another time the input element, it will return to the default color.
Example default border-color with css:
<style>
input[type='text']:focus {border-color: black;}
</style>
I have a list element with div content inside and an a tag wrapping the div content. Example code:
<li>
<a href="http://google.com/">
<div id="tease-info">
<div class="inset-img-border fade"></div>
<img src="/img/img.jpg">
<div id="arrow-right-small"></div>
<h4 class="title">E-mail Marketing</h4>
<p class="title">Messaging That Pays</p>
</div>
</a>
</li>
In my style sheet, I have a hover being applied to 'tease-info' for interior content. Like so:
#tease-info:hover h4{
color: rgb(191,69,164);
}
The problem comes only in ios. On my ipad, when I tap the li element, I get that grey overlay native to ios, letting you know the element your selecting. I also get the hover state. However, when I release, I am not taken to the href and the hover state remains enabled.
It seems like the hover state is over-ruling the a tag? What is happening?
ok i have a fix now. To start with im using Modernizr, and i read a technique which suggested using the .touch and .no-touch class's to fix the issue. this works pretty easily if your :hover event is expressed in CSS
.ugcpost:hover .meta {display:block;}
.touch .ugcpost:hover .meta {display:none;}
this solves the problem, just make sure you have the touch event in your Modernizr config. another more fleshed out option if you using JS to show and hide your hover, is to force page to follow the href with a single click. there is one issue to note though that you want to ensure your distinguishing between a true click and not a screen scroll. so please see the following JS, again using Modernizr, alough you code just check the client's User agent.
followPost : function(item) {
$(item).on('touchend', function(e){
location.href = $(item).attr('href');
$(item).off('touchend');
});
$(item).on('touchmove', function(e){
$(item).off('touchend');
});
},
initTouchEnhancements : function() {
$('.collection a, .post a, .ugcpost a').live('touchstart', function() {
var item = this
followPost(item);
});
}
NOTE: this also relies on the use of 'on' and 'off' functions in JQ 1.7. thanks to this post for identifying this.
Stop the touchstart performing too quick when scrolling
I am working on pictures inside ASP.net (VB)
and try to make this picture hide when the mouse over and show if it mouse out
How can I do this without using script or jQuery ?
help me please
You can do this in Javascript or CSS.
For example, to use CSS:
<img class="hideshowimage" ... />
and in your CSS
.hideshowimage:hover { visibility:hidden; }
Can I hide the borders of the searchbox ? I would like it completely white, just the text should be visible. And I need a solution for all browsers.
See the picture:
http://dl.dropbox.com/u/72686/searchBox.png
you can add this
<input name="textfield" type="text" class="hide_border" id="textfield" />
css
.hide_border{
border:none;
*border:solid 1px #FFF;
}
By using a standard checkbox I am not sure whether you get this effect in a cross browser way. You can use a custom element and make it act like a checkbox using CSS and javascript.
See this one which uses jquery
Fancy custom radio and checkbox
I'm not sure if I understand correctly. Why don't you just hide the checkbox and leave the label ? (Later using javascript and such you can redisplay the checkbox)
Checkboxes can not be styled in all browsers. The common solution is to use two images, toggling between the two when clicked (and updating a hidden field as necessary).
<style>
.inputsearch input
{
background-color: #FFF;
border: none;
}
</style>
<div class="inputsearch" style="text-align:left;">
<input type="text" value="HEy there ">
</div>
Styling checkboxes isn't doable in a crossbrowser fashion without some jQuery, have a look at this: Custom checkboxes with jQuery. It's the only way to do it, standard checkboxes cannot be styled in all browsers.