In the example below, I am applying the same rules to submit and button elements, but when rendered, they are behaving differently. The button element behaves as expected; however, the input element is green by default even when there is no hovering, and does not change colour at all on hover. I have set up a JSFiddle here: http://jsfiddle.net/D5WZ5/
CSS:
input[type="submit"],[type="button"]
{
background-color:blue;
}
input[type="submit"],[type="button"]:hover
{
background-color:green;
}
HTML:
<input type="submit" value="Submit" />
<input type="button" value="Button" />
Demo Fiddle
Change your CSS to:
input[type="submit"],[type="button"]{
background-color:blue;
}
input[type="submit"]:hover,[type="button"]:hover{
background-color:green;
}
You hadn't also applied the :hover selector to your input element
Related
Here is the code:
input[type=text] {display:none}
<input type="text" />
It would hide the whole input element.
Is there a way to keep the input element's out frame UI and just only hide its content without setting its value to "" by js.
Make the color transparent.
.value-hidden { color: transparent }
.value-hidden::selection { color:transparent; }
<input class="value-hidden" value="the hidden message">
This will work if your input value is not excessively long:
.value-hidden { text-indent: -99em; }
<input class="value-hidden" value="the hidden message">
Simply font-size:0 but you need to make sure to apply a width/height to the input.
input[type=text] {
font-size:0;
min-width:200px;
min-height:30px;
}
<input type="text" value="hello world">
I have a form where if someone checks a specific input, I want it to show a div. The problem is that the input does not share the same parent as the subsequent div (and can't, for framework reasons). So for example:
<div>
<input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
<!--content to show if test input is checked-->
</div>
This CSS almost works, but is broken by the fact that the div I want to show is not inside the parent of the input:
#test ~ #ShowIfTestIsChecked{
display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
display:block;
}
Is there some other CSS trick I can use here to make this work? This is easy to do with javascript, but I'd like a CSS only way to do it.
Doing this in css would require being able to select the parents div and then the next div which isn't possible in css, You can only select the next or children elements in a css selector.
Why do you want to wrap the input in a div in the first place?
Gimme a sec I'll post an update with css trick that works they way you want but requires changing the first div element into a form element.
So you have to chance the html or us js.
For html you've got 2 options , put the content of each div together or use a form element:
<form>
<input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
Hello world
</div>
#ShowIfTestIsChecked {
display: none;
}
form:valid ~ #ShowIfTestIsChecked {
display: block;
}
Just put your checkbox and div together:
<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>
#test:checked ~ #ShowIfTestIsChecked {
display: block;
}
There's no other CSS-way.
The calendar dropdown in DatePicker is taking the font size of the document rather than the div inside which the DatePicker resides. How do we fix this?
We don't want to apply the font size manually on the Calendar, because our solution is customizable and we want to allow other widgets with dropdowns as well and so we cannot forsee all dropdowns that might be shown.
#datepickerParent
{
font-size:100px;
}
body
{
font-size:15px;
}
<div id="datepickerParent">
<input type="text" id="datepicker" />
</div>
<input type="text" id="dateInput" />
$(function () {
$("#datepicker").datepicker();
$("#dateInput").datepicker();
})
the calendar always takes 15px as its font-size.
Here is the jsfiddle
Apply style to the ui-datepicker class or ui-widget class
.ui-datepicker{
font-size:10px;
}
Fiddle Demo
I think you can use the following code:
.ui-state-default
{
font-size:10px !important;
}
I have the following html inside my asp.net mvc web application:-
<form class="customSearch"method="GET" action="#Url.Action("Search", "Home")">
<input class="searchInput push-up-button" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text"/><input type="submit" value="Search" class="btn"/>
</form>
The result will be as follow,
where the search button and the text field have different height. So how I can force both elements to be on the same horizontal alignment ?
Thanks
First at all reset all values for both input :
input {
margin:0;
padding:0;
border:0;
}
Then set an equal height , line-height , vertical-align and box-sizing:
input {
height:30px;
line-height:30px;
vertical-align:middle;
box-sizing:border-box;
}
After that you can personalize each one with lateral padding and color for background and text.
The demo http://jsfiddle.net/3TeHT/6/
I have a div called image. It has a CSS-property visibility:hidden;. I have another button called button.
What I need is when I hover the button, the image changes to visibility:visible;.
Can I do it with CSS or do I have to use JavaScript?
yes you can do this
as like this
HTML
<label for="button">Click here</label>
<input type="checkbox" id="button">
<div class="one">Show my div</div>
Css
label{
background:green;
padding:10px;
}
.one{
width:100px;
display:none;
height:100px;
background:red;
margin-top:20px;
}
input[type="checkbox"]{
visibility:hidden;
}
input[type="checkbox"]:checked ~ .one{
display:block;
}
Live demo
Updated answer
if you want to just hover than check to this *Demo*
Note that this is a javascript / jQuery solution:
$(button).hover(function() {
$('div#image').attr('visibility', 'visible');
}, function() {
$('div#image').attr('visibility', 'hidden');
});
You can only do this if the div is a child of the button - which isn't possible.
It's possible if you make it a child of something else (i.e. not a button, do it differently).
However, what browser? All the main ones? Because if you are willing to use only the most modern it's possible by using sibling selectors.
But for mainstream usage you can only do it if the div is a child of the hover element. Note: You can hover anything, it doesn't have to be a button or a link <a>. So that's what I would do - make a div element that looks like a button, and has a child that you want to change.
You need javascript for that. You can use css if your div is parent for the button, but in your case this is not possible
JS
function changeVisibility(objID) {
var el = document.getElementById(objID);
if(el.style.visibility == 'hidden') {
el.style.visibility = 'visible';
return true;
}
el.style.visibility = 'hidden';
}
HTML
<div id="box">Something to show</div>
<input type="button" class="button" onmouseover="changeVisibility('box')" value="Change visibility" />