Following the CSS style trick from this question I was able to create a custom upload button. Now, the challenge is to make the entire portion of the button change the mouse pointer icon to the hand one.
The way I partially achieved this can be seen here (jSFiddle). As you can see, the cursor only appears to be a hand while hovering the right area of the the button (I'm in the latest version of firefox).
The css (also on jSFiddle)
<span id="uploadMask">
<input type="file" multiple="multiple" name="file" id="file_upload">
<span class="button">Select Documents</span>
</span>
The css (also on jSFiddle)
#uploadMask {
width:160px;
display: block;
float:left;
overflow: hidden;
height:32px;
margin-right: 5px;
position: relative;
}
#uploadMask input {
position: absolute;
top:0;
bottom: 0;
right:0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
#uploadMask .button {
background:#ccc;
line-height:24px;
padding:5px 15px;
display:block;
}
Any ideas?
There's nothing you can do it seems to get the cursor property to work on the "text" portion of <input type="file">, but the "button" part does display the hand pointer.
http://jsfiddle.net/gN2JM/17/
No hand cursor on the red part!
Borrowing from the solution to this question:
Is there a way to make the native `browse` button on a file input larger cross browser?
You can enlarge the button size by adding:
#uploadMask input {
font-size:200px; /* Any high number to guarantee it's big enough,
overflow:hidden on the parent takes care of the rest */
}
http://jsfiddle.net/gN2JM/15/
If you take off the opacity: 0;, you'll see why there is a place where the cursor:pointer doesn't show up. http://jsfiddle.net/gN2JM/13/ Whenever you are moused over the actual button, it gives the regular cursor.
Use THIS for a solution that supposedly works all the time, or just set the position of the button to go off the edge of the screen>> http://jsfiddle.net/gN2JM/14/
Related
When I hover on the "message" part of the button, the hover animation works, but when i hover over the icon, the hover animation doesn't happen and this makes it a poor button.
Here's the HTML
<div>
<i className="profile-user-button-message-icon">message</i>
<button className="button-icon-message ">Message</button>
</div>
Hope this information is enough to understand my problem, comment below if you need more information, thanks!
It's React code, hence the "className".
CSS Code for icon
.profile-user-button-message-icon{
position:absolute;
left:0px;
top:20px;
}
Fiddle
you can write button:before {content: ''; display: inline-block; width: 10px; height: 10px; background: url('your bg-image');}
My code looks like this:
<div class="hovereffect">
<img class="img-responsive" src="/some-image" alt="">
<input type="checkbox" class="img-checkbox">
</div>
.hovereffect {
width: 100%;
height: 100%;
margin-bottom: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .img-checkbox{
position: absolute;
width: 18px;
height: 18px;
top: 3px;
right: 5px;
cursor: pointer;
}
So there is the checkbox in the right upper corner over the image and would like to extend the clickable are to the whole image for a better user experience.
As you can see the checkbox has no label and I would like to achieve the goal without a label.
I tried tricks with the ::after element which kinda worked with chrome but not really with firefox and I couldn't make the clickable area responsive that is to say, extend to the whole area of the image.
Can you use Javascript/jQuery?
You can start by assigning unique id to every image you have (Ex: img1,img2,img3) and every checkbox associated to the image (Ex: img1-checkbox).Then you can use the code below:
$('#img1').click(
$('#img1-checkbox').attr('checked', true);
);
Or something like that.
This has been a problem since a very long time and you simply cannot achieve your goal with pure css. The only available ways of getting it done are ou using label or jquery/javascript or :after pseudo class.
If you want to expand the checkbox size, then try this:
.hovereffect input[type=checkbox]
{
width:100px !important; //adjust as per need
height:100px !important; //adjust as per need
}
This will increase the clickable area of the checkbox field. Working Link
But, if you want the checkbox to be transparent and show the image behind, then you will have to use label and set it's background color to transparent.
I'm waiting to see someone prove me wrong with working code.
I have an annoying issue with the html layout of a form. I cannot really change the general setup, since it is part of a huge framework. But I have to "move" a button to a more suitable location. I am close, but not happy with the solution so far. Maybe you can give me some idea in this. Here is a dramatically simplified version to demonstrate my approach:
I have two container divs, top and bottom.
The top container shows a button on the left side. That button is fixed, but can have a different width due to the translation of its label.
The bottom container holds lots of stuff. Amongst that a second button at its top which works fine, but looks wrong. I want to optically move it into the top container, since there is a logical connection to the button in there. Sure, really placing it in there would be the correct solution, but I currently cannot do that. Instead I use a fixed position which works fine, except for the horizontal placement. I have to decide how far pushed from the left to place the button, so that it certainly does not overlap the first button in the container. I obviously have to consider all translations, the result works, but depending on the first buttons label I have an annoying horizontal gap between the two buttons.
I tried to use a pseudo element (::before) on the second button to help with the layout. Since when rendering the view I obviously have the translated label of the first button I can copy that into some property of the second button and use that property in my css to fill a before pseudo element of the second button which has exactly the same length as the first button. That is what is shown in the code example posted below.
What I completely fail to do is to place that pseudo element such that is it left in the top container (so exactly below the first button). The idea is to indirectly place the second button that way. Looks like this is not possible, obviously. But since I am a bloody beginner in markup and styling I thought it might be worth asking here...
Below is some drastically stripped down code to demonstrate my approach.
I create a jsfiddle for you to play around with. Here is the code:
HTML:
<div id="top-container">
<button>multilingual button text</button>
</div>
<div id="bottom-container">
<h2>
Some title opening the bottom container
<span class="into-top-container">
<button id="place-me" reference-text="multilingual button text">button to be placed</button>
</span>
</h2>
<p>Some content</p>
<p>Some content</p>
<p>Some content</p>
</div>
CSS:
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
#place-me {
position: fixed;
top: 0;
left: 400px;
margin: 5px;
background: yellow;
}
#place-me::before {
z-index: 0;
/*visibility: hidden;*/
position: absolute;
content: attr(reference-text);
margin: 0 5px;
padding: 0;
background: gold;
right: 100%;
}
Notes:
that in the above code the second button is placed with left: 400px;. That is more or less what I want to change. But obviously left: 0 is not correct...
the visibility css rule for the pseudo element is currently commented out for demonstration purpose
keep in mind that the second button is *not* contained inside the top container, but actually logically below the title of the bottom container. The goal is to move it optically up into the top container which already is where close to what I want. Except for the horizontal alignment...
Upon request here is a screenshot:
It is taken from the fiddle I posted above. I added the red ellipse which shows what element pair I want to move and the left pointing arrow indicating where I want to move that too. I want to move it exactly that far, that the two tests "multilingual button text" are exactly placed on top of each other, but without specifying an explicit left placement obviously. That is why the pseudo element exists: as a dummy placeholder. I would then hide that pseudo element and have the second button placed exactly right of the first button, regardless of how long the translated text in there is.
So the final result should like like that:
OK, I invested some more time, since this issue popped up again after a regression in our code and I found, as often after allowing some time to pass, a logical and relatively clean solution:
I use the same stripped down code to for demonstration purposes.
The jsfiddle is based on the one provided in the question itself.
HTML: no real change, except for the reference-text having moved from button to container, for the why see below:
CSS:
* {
font-size: 12px;
font-weight: normal;
font-family: Arial;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
span,
div {
margin: 0;
padding: 5px;
}
button {
margin: 0;
padding: 5px;
white-space: nowrap;
}
div#top-container {
width: 100%;
border: 1px solid green;
}
div#bottom-container {
width: 100%;
border: 1px solid blue;
}
span.into-top-container {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
border: 1px solid transparent;
}
span.into-top-container::before {
visibility: hidden;
content: attr(reference-text);
position: relative;
margin-right: 5px;
padding: 5px;
border: 2px solid;
background: gold;
}
#place-me {
background: yellow;
pointer-events: all;
}
The basic change in strategy: it is the container holding the button to be placed that has to be positioned in a fixed manner, not that button itself (so the <span class="into-top-container">)! That allows to use the pseudo before element, now also anchored to that container, not the button, to take the space as required without actually getting part of the button itself.
Since that container is now place over the original multilingual button that one is not clickable any more. That issue is fixed by a css pointer-events set to none for the container and set to all for the placed button again. That makes the container itself simply ignore all events (clicks) and have them passed to the original button beneath.
I had to make sure that the font used inside the pseudo element is style exactly like the original multilingual button. That actually makes sense, since the font styling defines the actual width used by that button, so the actual width used by the pseudo element should be defined in exactly the same manner. In the example above I forced that by simply setting all elements font style rules to some fixed values (the initial * {...} in the CSS code). That can obviously also be done right inside the css rules for the pseudo element itself. I chose the more simple and brute variant here to keep the code clean.
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
How do I create a similar “search” element to the one in this site?
If we view source, he has one textbox followed by a <span> tag.
<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>
Where do I get a similar "magnifying glass" image?
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.
What you need to do is add a wrapper div around the input:text and input:submit.
The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.
You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
.search {
border: 1px solid #000000;
width: 200px;
}
.search input[type="text"] {
background: none;
border: 0 none;
float: left;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
width: 180px;
}
.search input[type="submit"] {
background: #CCCCCC url(path/to/image.jpg);
border: 0 none;
height: 1.5em;
line-height: 1.5em;
margin: 0;
padding: 3px 0;
text-indent: 100px;
width: 20px;
}
<form ...>
<div class="search">
<input type="text" />
<input type="submit" />
</div>
</form>
If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you’ll be able to see the CSS used to achieve this effect.
If you’re not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide’.
A site like Iconspedia has a number of free icons that are similar.
Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.
If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:
http://jsfiddle.net/Lzm1k4r8/23/
You can adjust left: position to be left or right side of the search box.
To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:
.search:hover {
cursor:pointer;
}
I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request.
It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.
It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.
For instance:
$('#search-field').iconfield( {
'image-url': 'imgs/search.png', // url of icon
'icon-cursor': 'pointer' // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
$('#search-form').submit()
}
I would love to get some feedback on my work.