when I make a number input field like this:
<input type="number" />
Then the number field gets a spinner added to it whenever I hover over the field. A lot of people talk about how to disable these spinners like this:
http://css-tricks.com/snippets/css/turn-off-number-input-spinners/
But I would like to know how do you make them ALWAYS visible and not just when you hover over them?
It's the Chrome opacity settings that are giving you a headache. This will solve your issue:
input[type=number]:hover::-webkit-inner-spin-button,
input[type=number]:hover::-webkit-outer-spin-button {
opacity: 1;
}
This being the problem is kind of opaque.
To make the spinner always show, leave out the ":hover" in Schneeez's answer.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
It is not possible to do this with the Browser specific style.
You would need to either build that functionality yourself using some Javascript or look for a premade script on the interwebs.
You can only hide those Shadow DOM elements as they trigger very browserspecific css-attributes to provide the functionalitys like onclick or onhover.
See: http://css-infos.net/property/-webkit-appearance (You could trigger another behaviour for your Input-Field, but you cant force it to be always visible)
Related
So I've been having this problem for a while now, and I just can't figure out why it isn't working. I want to use html5 validation to validate my form, but only show a pink background on invalid inputs AFTER clicking on a button.
.submitted input:invalid {
background-color: pink;
}
I have this jsfiddle here representing the problem I have.
Why is this CSS selector not working? Is there any other way to achieve this?
If I remove the .submitted and just leave the input:invalid, it works instantly, but I want the validation to execute only AFTER I click the button.
I'm certain the script works, as I can see the class being added to my inputs via firebug, but the styling infuriatingly stays the same.
Aren't you simply looking for the following? Pardon if I misunderstood your question.
input.submitted:invalid {
background-color: pink;
}
For starters I'm not sure what you're trying to do with your jsfiddle.
Firstly, inorder to assess whether a field is invalid, you need to do some validation then say, add a class to the input to say if it's invalid.
Seeing as you're using jQuery, I'll give you an example using javascript.
$('form'/*could supply a name like [name="name"]*/).submit(function(event){
if($('input[name="firstName"]').val().length<3)$('input[name="firstName"]').addClass('error');
event.preventDefault();
}
I have an ExtJS form that uses hbox-layout containers to create sentences that contain form inputs and there is a requirement to disable the form under certain conditions. The hbox-layout containers have a series of radio, text, checkbox, and textfield components. You can see an example on jsfiddle.
This is an answered question here on SO that doesn't fully work for me because if you disable something that isn't a field (like the text component I'm using) the disable style is different - it appears to mask the component instead of just graying out the text. When nested components are disabled, the mask gradients stack. Examples of this scenario are illustrated on this jsfiddle.
Is there a way to override how text handles its styling when it becomes disabled? I think that may be the easiest solution.
You'll have to handpick each style fix, but yes that's completely possible. Just addCls to give a hook for your CSS...
For example, using the following CSS:
.my-disabled-ct text {
opacity: .3;
}
You can give a similar disabled look both to fields and text items with the following code:
var rootCt = Ext.getCmp('lotsOfItems');
rootCt.query('field').forEach(function(field) {
field.disable();
});
rootCt.query('container').forEach(function(ct) {
ct.addCls('my-disabled-ct');
});
You should probably avoid using disable on field since Ext put a mask over them then (though you could probably hide it with CSS).
You could add the class and target the CSS directly to text items however, why not? In this case, you would query for 'text' and use addCls on them, with this kind of CSS:
text.my-disabled-cls {opacity: .3;}
That goes without saying that you'll restore your components look to "not disabled" by removing the CSS class with the same query and the removeCls method.
I would like to dynamically generate textareas, with JQuery Mobile, with varying numbers of rows. I was intending on using knockout for this, data-bind to the rows attribute.
E.g. here: http://jsfiddle.net/j7b9A/2/
<label for="textarea-1">5 rows:</label>
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea>
<label for="textarea-2">10 rows:</label>
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea>
However, JQuery Mobile seems to ignore the rows attribute, which is well-documented: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea, and is even included in JQuery Mobile's own documentation: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea.
A comment here states that setting the height and width overrides the rows attribute: https://stackoverflow.com/a/7194692/1061602. It seems that it is because JQuery Mobile is doing a transition when the textarea expands. So is rows attribute always being completely overridden?
Another similar question is here: How to make text area to be height of 10 rows fixed?, but this doesn't help me as I don't want to fix the height of all textareas, I would like them to vary, as they can normally using the rows attribute.
Also what I have noticed, which I can't explain, is that in my own code, a rogue style="height: 184px;" is added to one of my textareas, but not another. The other just uses the standard style of 50px, as highlighted in this answer: jQuery Mobile and textarea rows - this would seem to indicate there is something else going on, but I can't reproduce this yet in a simple fiddle.
I've had a quick look at the JQuery Mobile source but I can't see the rows attribute being used at all?
What would be the best way of specifying a range of row heights for a range of bound JQuery Mobile textareas?
all you need is... add this
textarea.ui-input-text { height: inherit !important}
jQM enhances textarea by adding different classes for responsiveness and styling purposes. The fastest and easiest way to maintain rows height is by overriding jQM class.
Demo
CSS solution:
.custom_class {
height: auto !important; /* !important is used to force override. */
}
JS solution - set height after textarea is enhanced.
setTimeout(function () {
$('textarea').css({
'height': 'auto'
});
}, 0);
JQuery Mobile is intended to be responsive, so by design it's not going to take up space until you need it. If you add data to the textarea, either via input or via code, you can see that it grows as needed.
If you want to override that size when it's empty, you have two options:
Use the method Omar mentioned, which is to turn off the JQM role, as you did in the JSFiddle example.
The other is to override the default class, as seen in this answer.
I had the same problem and I finally found a solution. you can set ' data-autogrow="false" ' in textarea element, after that you can set rows attribute or height in css. it does works in jquery mobile 1.4.0+
Text area content auto scroll when more lines. max-height as you wish.
Add css
textarea.size{max-height:30px;}
<textarea name="textarea-1" id="textarea-1" style="max-height:30px;">
You can use this : data-autogrow="false"
like this :
<textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>
I have a strange problem with my facebook like button.
Normally, when you click 'like' on a site, you get a popup for a comment. This popup has 100% opacity on mouseover, but reduced opacity on mouseout.
However, on my site, this is reversed. I get 100% opacity on mouseout, and reduced opacity on mouseover. Obviously, this makes it difficult to use.
Here's my site: http://notts-squash.co.uk/results.html?table=teams&idd=440&season=10&social=true. (To test on other pages, add &social=true to the URL.)
Many thanks in advance! This has been confusing me for weeks.
The CSS from widget72.css is causing the transaprency:
.at300b:hover {
opacity: 0.8;
}
You could change your CSS file to :
.at300b:hover {
opacity: 1;
}
As long as your CSS file comes after widget72.css (which I assume your are hot-linking to) then this should fix the problem. Otherwise you can add !important to the code in your CSS file.
Edit
If you wanted the children to have the opacity: 0.8 (in the pop-up) when you are not hovering then you could try the following:
.at300b > * {
opacity: 0.8;
}
.at300b:hover, .at300b:hover > * {
opacity: 1;
}
This is a bit of a hack but would work incase you never find why you are getting this behavour.
I can't figure it out as of yet, however, first thing I'd recommend is to change from fbml to html5 style tags for the like plugin. If that doesn't work, try taking the like plugin out of the complexity of the results.html page and place into a page with minimal HTML elements. If that works, then you will need to start with a bare bones version of the results.html page and start adding in element/block of HTML at a time until the plugin breaks. This will tell you what HTML is causing problems with the like plugin.
I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8