I created the html fieldset with some textbox inside.
I want to add a close button to the fieldset using only css like this.
Is it possible? If it is, help me please. Here is my jsfiddle
i updated your fiddle http://jsfiddle.net/ukx35/18/
<fieldset style="position:relative">
<legend>Title</legend>
<input type="text"/>
<button style="position: absolute;right:10px;top:-5px;outline:5px solid #fff">
<img src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-basic/16/Close-2-icon.png"/>
</button>
</fieldset>
use position absolute for the close button and position relative for your fieldset
Related
I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.
You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that
Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>
I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
I have the following code:
<div class="w25">
<span>True</span>
<input data-ng-model="answer.correct"
type="checkbox">
</div>
The div is approximately 150px wide. What happens is that the input appears in the center with about 70px on each side.
How can I get the <input> to go to the left ?
span and input elements are both inline by default, and the checbox will be placed next to the span element. I assume no further styling is applied on any of the elements. If it is, please post your css.
If you want to place the checkbox on the left, you can either:
Turn around the span and input (input first, then the span)
Float the input to the left (style="float: left;")
Use explicit positioning (eg. postition: absolute; left: 0;)
As illustrated here
<input data-ng-model="answer.correct" style="float:left" type="checkbox">
Probably you have inherit styles from your div class="w25". But you can try with this:
One change the order:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
Two add this properties on your CSS to be sure each element has the correct properties:
.w25 input, .w25 span {
margin:0;
padding:0;
vertical-align:middle;
}
View this demo http://jsfiddle.net/W7YE7/1/
First, change the positions of input and span (if you can do it) and see if it works:
<div class="w25">
<input data-ng-model="answer.correct" type="checkbox">
<span>True</span>
</div>
If it doesn't work, try to change the input for:
<input data-ng-model="answer.correct" style="float: left" type="checkbox">
If it doesn't work too, try it:
<div class="w25">
<div style="width:70px; display: inline;"><span>True</span></div>
<div style="float:left; width:70px; display: inline;"><input data-ng-model="answer.correct" type="checkbox"></div>
</div>
You can add the CSS style float: left;
Usually it's a better practice to put the styling in a separate CSS file, not inline, so if you can do that, assign a class to the input, like this:
<div class="w25">
<span>True</span>
<input class="yourclass" data-ng-model="answer.correct" type="checkbox">
</div>
And in the css file:
.yourclass {float: left;}
Here you have the JsFiddle: http://jsfiddle.net/A52nS/
try this css
.w25{
float:left;
}
I've got the following...
<td class="lst-td" width="100%" style="">
<div style="position:relative;zoom:1">
<input autocomplete="off" class="lst" type="text" name="q" maxlength="2048" value="" title="Search" spellcheck="false" tabindex="1">
<span id="tsf-oq" style="display:none">
</span>
</div>
</td>
<select id="menu" class="InPage " tabindex="2" style="position: relative; float: right;">
<option value=9999>"a value</option>
</select>
Currently the select just displays next to the td which is a search bar rather than letting the search bar expand across the page and simply displaying within it (to the right hand side) how do I fix this?
Unsure of exactly what you are looking for but from what I can gleen you want a input with a select on top of it.
To do this set a div to position:relative and put the select and input inside it. Then set the input to width:100% and the select to position:absolute and top:0px; right:0px;
see http://jsfiddle.net/L593G/7/ for an example of this working.
From here you can use top and right to control the positioning of the select and the width of the div to control the width of the whole control.
This technique is called Relatively Absolute positioning and more information can be found here http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Hope this helps :-)
float:left on both the <div> and <select>
See my example on jsfiddle - http://jsfiddle.net/Gpy9Y/
Oh and why are you using tables? NO NO NO NO!!!
Update (#15:28 GMT):
div{float:left; width:100%;}
div input{width:100%;}
select{position:relative; top:-20px; left:4px;}
You should use #Michael Allen example. But if you must stick with your current mark-up, this will work. http://jsfiddle.net/Gpy9Y/5/
I've done this before but for some reason im trying to right now and im using fieldset to display the background image and i can only get it to look nice in firefox. Whats a good cross-browser solution to adding a background image to a textbox.
example i was trying
<div class="subscribe">
<form method="get" id="searcform" action="">
<fieldset class="search">
<input type="text" class="box" value="Subscribe to Email Newsletter" />
<button class="btn" title="Subscribe">Subscribe</button>
</fieldset>
</form>
</div>
I'm not sure precisely what element you mean, but the following should work:
input[type=text],
textarea {
background: #fff url(path/to/image.png) 0 0 no-repeat;
}
Simply make your input transparent and place inside a container div.
Example: http://jsfiddle.net/LRWWH/
Cross browser friendly.