I have the following:
input.bg:hover {
...
}
I'm using the above following: <input type="submit" class="bg" value="ttttttt"/>
now how to modify the class, so I can use <input type="submit" class="bg-small" value="cccccccc"/> ?
I need to add .bg-small into this css class, but I don't know how. I've been trying the following:
input.bg:hover .bg-small:hover {
...
}
Did you mean this ?
input.BG:hover, input.BG-SMALL:hover {
.....
}
So when you move your mouse over the normal input or submit input, they has the same effect
input.BG:hover, input.BG-SMALL:hover {
...
}
I'm not sure what you mean, but if you want the same class properties from BG for BG-SMALL, you can set
input.BG:hover, input.BG-SMALL:hover {
}
or just use the same class for the inputs if there's no difference.
Related
I have two css classes
.circle-btn{
}
.circle-btn-medium{
}
Hhowever both classes having their own properties. But at hover property I want to use same background color for both.
One solution i found is what to use hover property seperatly as follows
.circle-btn:hover
{
background-color:#39C11E;
}
.circle-btn-medium:hover
{
background-color:#39C11E;
}
So instead of using hover property separately is it possible to use this property with different classes at same time so I can optimize my coding?
You can minimize it by joining the 2 class in to one ..
.circle-btn:hover ,
.circle-btn-medium:hover {
background-color: #39c11E;
}
You can use one or two classes in your html. So -medium will be modifier, which responce only for size.
For example:
css:
.circle-btn{
}
.circle-btn-medium{
}
.circle-btn:hover
{
background-color:#39C11E;
}
html:
<!-- common circle-btn -->
<button class="circle-btn">circle button</button>
<!-- medium circle-btn -->
<button class="circle-btn circle-btn-medium">circle medium button</button>
By the way, this is bootstrap way. Just look, for example, to their buttons sizes modifiers.
I need for apply multi css rule to html tag in angular form template.
<div class="form-control" id="data.objectStyle"
ng-model="data.type"
ng-style="getStyle(data.objectStyle)">
{{data.objectStyle.title}}
</div>
getStyle function in controller :
$scope.getStyle = function (taskType) {
return {
background-color:taskType.backColor,
color: taskType.color,
font-size:taskType.fontSize,
font-family:taskType.font
}
)};
taskType object:
{
backColor:'#006',
color:'#56DA',
fontSize:12,
font:'New Times Roman'
}
The getStyle function does not return a style! What to do?
EDIT
The docs specify that you need to wrap your keys in quotation marks so they aren't invalid JSON object keys:
return {
"background-color": taskType.backColor,
"color": taskType.color,
"font-size":taskType.fontSize,
"font-family":taskType.font
}
Old Answer (not using ng-style)
While I never used ng-style, it doesn't seem to take objects. Rather it is an equivalent of ng-class but for single styles.
Try changing your function to:
$scope.getStyle = function (taskType) {
return {
"background-color:"+taskType.backColor+
";color:"+ taskType.color+
";font-size:"+taskType.fontSize+
";font-family:"+taskType.font+";";
}
)};
and the html to use the regular style tag with a bind:
<div class="form-control" id="data.objectStyle"
ng-model="data.type" style="{{getStyle(data.objectStyle)}}">
I want to select a text input element that has been changed or typed? is it possibe to do that? like
input:changed {
/* my own rule*/
}
I´ve created a jsfiddle for a solution with jquery, where I add a class to the element when the value in the input is changed: http://jsfiddle.net/aSX5A/ :
<input type="text" class="textinput" />
$('.textinput').change(function () {
$(this).addClass("changedInput");
});
Edit:
With pure javascript:
<input type="text" id="textinput" onchange="updateClass()"/>
<script>
function updateClass(){
document.getElementById("textinput").className = "changedInput";
}
</script>
you'd need to implement this with javascript somehow.
<input onkeydown="javascript:myFunctionToChangeState(this);" />
where myFunctionToChangeState() is a function you write that modifies the state of the element it is passed.
You are not being very specific but i guess this is what you need
input:focus {
/* your own rule*/
}
I would like to apply a special style to all inputs in my form that are required and empty at that.
It does work when i write in my css
input[required='required'] {
bla-bla-bla;
}
but it doesn't work, when i write
input[value=''] {
bla-bla-bla;
}
I know i can do that using jQuery, but i would like to do that in pure css, if it is possible.
Can that be done?
Thank you in advance,
Timofey.
If you don't have to support older IE versions, you can set the placeholder attribute on your input to something (can be whitespace, but must be something) and use :placeholder-shown to target that input.
<input type="text" class="custom-input" placeholder=" ">
.custom-input:placeholder-shown {
/* Your rules */
}
You can use the Pseudo-Selecot :invalid for this - it will match an input only when the browser-validation fails for the element. If you set the element required it will be invalid as long as it is empty.
And all moder browsers support this CSS-class: Browser Compatibility
input:invalid {
border-color: red;
}
<input type="text" required>
Searched css style empty inputs and found the following:
Matching an empty input box using CSS
You need to use JavaScript.
To use the CSS style, you would have to type in the attribute: value='' in your HTML, but then the CSS would match regardless of if the value changes mid-session.
Try this
<input type="text" value="">
input:not([value=""]) {
/* Your code */
}
I'm trying to have some file inputs, and have them only show up if the previous one has been filled. This can use css 3 as well.
An example worth thousands words: Display X input, one at a time
The idea is simple, if an input set as required is empty, it's invalid. From there, all you have to do is set all input as required and use the :invalid pseudo class. Should work great with label too.
input:invalid~input:invalid {
display: none;
}
<input type="file" required>
<input type="file" required>
<input type="file" required>
To expand on Yi Jiang's comment, selectors against the "value" attribute won't notice changes to the "value" property. The "value" attribute is bound to the "defaultValue" property, while the "value" property isn't bound to any attribute (thanks to porneL for pointing this out).
Note there's a similar relationship with the "checked" attribute and "defaultChecked" and "checked" properties; if you use an attribute selector [checked] rather than the pseudo-class :checked, you won't see style change when a checkbox's state changes. Unlike the "checked" family, "value" doesn't have a corresponding pseudo-class that you could use.
Try the following test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic attribute selectors</title>
<style type="text/css">
input:not([value]), div:not([value]) {
background-color: #F88;
}
input[value], div[value] {
border: 5px solid #8F8;
}
input[value=""], div[value=""] {
border: 5px solid #F8F;
}
input:not([value=""]), div:not([value=""]) {
color: blue;
border-style: dashed;
}
*.big {
font-size: 200%;
}
</style>
<script>
function getElt() {
var id=prompt("Enter ID of element", "d1");
if (id) {
return document.getElementById(id);
} else {
return {className: ''};
}
}
function embiggen() {
getElt().className="big";
return false;
}
function smallify() {
getElt().className="";
return false;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="d1">no value</div>
<div id="d2" value="">empty value</div>
<div id="d3" value="some">some value</div>
<p><label for="foo">foo:</label> <input name="foo" id="foo" /></p>
<p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p>
<p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p>
<input type="button" value="Embiggen" onclick="return embiggen()" />
<input type="button" value="Smallify" onclick="return smallify()" />
</body>
</html>
Changing the value of anything and the style won't change. Change the class of anything and the style will change. If you add the following JS function and bind it to a change event on an input, the background style will change.
function bindValue(elt) {
var oldVal=elt.getAttribute('value');
elt.setAttribute('value', elt.value);
var newVal=elt.getAttribute('value');
if (oldVal != newVal) {
alert('Had to change value from "'+oldVal+'" to "'+newVal+'"');
}
}
This binds the "value" property to the "value" attribute, so updates to the former by user input will propagate to the latter (programmatically setting the "value" property won't cause a change event).
In examining the JS properties of file inputs before and after (by use of the following script), the only one with an appreciable change was "value". From this, I doubt there are any other HTML attributes that change and could hence be used in an attribute selector.
<script>
var file = {blank: {}, diff: {}};
var fInput = document.getElementById('file');
for (p in fInput) {
try {
file.blank[p] = fInput[p];
} catch (err) {
file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";
}
}
function fileDiff() {
for (p in fInput) {
try {
if (file.blank[p] != fInput[p]) {
file.diff[p] = {orig: file.blank[p], now: fInput[p]};
}
} catch (err) {
//file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";
}
}
}
if (fInput.addEventListener) {
fInput.addEventListener('change', fileDiff, false);
} else if (fInput.attachEvent) {
fInput.attachEvent('onchange', fileDiff);
} else {
fInput.onchange = fileDiff;
}
</script>
You can hack together something using a link to a non-existent fragment and the :visited pseudo class, but it's quite egregious.
<style>
a input {
display: none;
}
:not(a) + a input,
a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<input type="file" ... />
<input type="file" ... />
<input type="file" ... />
You'd need to generate unvisited targets for the links every time the page is loaded. Since you'd have to do it server side, you couldn't do this with complete certainty, though you could get the probability of generating a previously visited target arbitrarily close to 0. It also doesn't work on all browsers, such as Safari. I suspect this is due to the following from CSS2 and CSS3:
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.
You might be able to hack something together using other selectors on other elements, but I suspect this can't be done cleanly.
To select empty fields you can try
input[type=file][value=""] {
background-color: red;
}
I tested it on jsfiddle. There at least, I needed to define an empty value attribute on the input tag for it to work
<input type="file" id="test" value="">
Using the '+' operator as you've done in your example would match two separate file inputs, one right after the other. It doesn't examine two attributes of the same tag as you appear to want.