I just made my search button/icon clickable by adding a transparent button onto the input field. Not sure this is the right way to go about it but I couldn't think of anything else outside of jQuery/javascript which I'm not very experienced with. Seems to work fine except the hidden button isn't totally hidden... I've made the background transparent and said border: none but I can see a little shadow of it. See screenshot below and put on some glasses because it's barely noticeable. Still bugs me very much. I've looked through my stylesheet and can't find any shadow setting for inputs so unsure how to fix this.
HTML:
<div id="SearchForm" style="width: 120px; height: 29px; position: relative; top: 16px; right: 17px; padding-left: 20px;">
<form action="%%GLOBAL_ShopPath%%/search.php" method="get" onsubmit="return check_small_search_form()">
<span class="add-on" style="position: absolute; top: 6px; right: 4px;"><i class="icon-search"></i></span>
<input type="text" class="input-small" name="search_query" id="search_query" placeholder="Search..." value="%%GLOBAL_OriginalSearchQuery%%" title="Search" />
<input type="submit" value="" name="Search" title="Search" style="position: absolute; top: 2px; right: 0; background: transparent; border: none; width: 35px; height: 22px;" />
</form>
</div>
CSS:
input[type="submit"] {
cursor: pointer;
-webkit-appearance:none;
}
That is I guess border-top of the button, or the button is not totally hidden. So you can try this out:
<input type="submit" />
And then use CSS to change the image, to the background-image for the submit button. So when you will click the form will be submitted!
input[type="submit"] {
/* here, you can change the background-image
* background-image: url('../link/to/file.png');
*/
}
If you really wanna get rid of it, then remove the above image, and use it as the background-image of the button. This way you won't have to worry about the button.
You can hide the button using:
input[type="submit"] {
opacity:0.0;
filter:alpha(opacity=00); // for ie..
}
Also, if you provided a link to the website then we might have noticed what was causing the issue, or just the source code.
Related
I want to change the area( margin ) around my custom modal to this color #494c4e54 . If the user clicks outside the modal it closes, It would be nice if it wont be affected
CSS
.mojmodal
{
background: #e2e3e4;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;
width: 350px;
height: 400px;
border-radius: 2px;
border-bottom: 5px solid gray;
}
HTML
<div class="mojmodal gorkaze">
<form name="vnos" method="post">
<div><legend>Prijava</legend>
<label>Uporabniško ime</label><br>
<input type="text" name="ime">
</div>
<div>
<br><label>Geslo</label>
<br><input type="password" name="geslo">
</div>
<div><input type="checkbox" name="zapomni"> Zapomni si me<br><br>
<button type="submit" class="btn btn-primary" name="tipkamodal">Prijava</button></div><div>
Še nimate računa?
</div></form>
Login();
</div>
Here is a picture of the highlighted modal(click here)
There is no margin color property.
To achieve this effect you'll need additional elements or pseudo elements.
J.D. commented on your question this link: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Pure-CSS_lightbox which should help you create the effect.
I'd also suggest you brush up on your CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
I'm trying to make a custom file selection button in HTML and CSS.
I've read on the internet that it can be done, hiding the original button and 'drawing' a new one over it, like so:
HTML:
<div class="upload">
<input type="file" class="upload" name="upload"/>
</div>
CSS:
div.upload {
width: 157px;
height: 57px;
background-color: silver;
}
div.upload input {
display: block !important;
width: 157px !important;
height: 57px !important;
opacity: 0 !important;
overflow: hidden !important;
}
And it's working, obviously... but I want only a text, not a image.
So I tried it like this way:
<div class="upload">
Choose File
<input type="file" class="upload" name="upload"/>
</div>
And it won't work when I click on the label. It only works when I click below it.
Why doesn't this work and how can I make this work? I also tried with pointer-events and nothing...
You have to assign your text to your <button>, using a <label> with a for attribute equal to the id of the <input>.
<div class="upload">
<label class="uploadLabel" for="uploadBtn"> Choose File</label>
<input id="uploadBtn" type="file" class="upload" name="upload" />
</div>
In order to completely cover the button with your label, you'll also have to add absolute positioning.
.uploadLabel {
position: absolute;
}
Demo
Why is this necessary?
The event is triggered on your button. This basically means, clicking on a plain text element won't do anything. To trigger a click event on your button, you simply delegate the click on your label to your button.
use an actual label element. that will take care of delegating the click from the container to the input.
set opacity to 0, as you did in your original post (another, more verbose, and arguably more semantic approach will be to position the input absolutely and the label relatively, and set a lower z-index to the input. that will cover the input completely, effectively hiding it — see the second example).
the benefit here is you get clickable area that matches the label surface only, so you can style and set the dimensions to the label alone.
.upload {
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
opacity: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
… and the more verbose approach:
.upload {
position: relative;
display: block;
width: 157px;
height: 57px;
background-color: blue;
}
.upload input {
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<label class="upload">
Choose File
<input type="file" class="upload" name="upload" />
</label>
Here is the HTML script of my header:
<div class="header">
<div class="logo"><img src="style/images/logo.png" alt="" /></div>
<div class="toplink">Sign in</div>
<div class="search">
<form class="searchform" runat="server" method="get">
<input type="text" id="s" name="s" value="Search for photos" onFocus="this.value=''" onBlur="this.value='Search for photos'"/>
</form>
</div>
</div>
And here is the CSS script:
.logo {
padding: 30px 0;
}
.logo img {
display: inline;
}
.toplink {
position: absolute;
bottom: 40px;
right: 280px;
font-size: 14px;
}
.search {
position: absolute;
bottom: 10px;
right: 0;
font-size: 14px;
width: 330px;
}
Somehow the Sign in link isn't clickable, but when I remove the absolute position, it works normally. Is there anyway to make the link work while still keeping the position? Any suggestion is appreciated, and thanks in advance.
-Edit-
Turns out the problem lies somewhere else. Actually I'm using masterpage and I created a default ASP page using it. The problem only occurs when I test that ASP page, not the HTML file that I used to create the masterpage. Sorry if I sound complicated but yeah, the problem's sort of complicated to me. Hopefully someone can point out the reason for me.
Try adding z-index:10; to .toplink{...} class.
I have a button inside an absolutely positioned div and had this problem. z-index wasn't enough, I used pointer-events: all instead.
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.
I have a button:
ON
OFF
Here's the CSS:
.searchButton {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
.searchButton:hover {
height: 31px;
width: 33px;
cursor: pointer;
border: none;
background:url(../img/searchButton-On.png) no-repeat;
}
Here's the HTML:
<div class="searchBox">
<h2 style="color:000000;">Search</h2>
<form id="form_297586" class="appnitro" method="get" action="results.php">
<input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
<input type="button" class="searchButton" />
<input type="hidden" name="form_id" value="297586" />
</form>
</div>
Here's what my browser is rendering:
Safari
Opera
When I mouseover the button, it is correctly switching, and then will display the entire button. I'm not sure why this behavior is happening.
Thoughts?
Buttons have a lot of default styling attached to them. Consider implementing a reset stylesheet, like:
Eric Meyer's Reset
Normalize.css
Also, an element must be set to display: block or display: inline-block in order for dimensions to be able to be set on it.
Finally, I recommend that you put a simplified example of your problem into JSFiddle or Dabblet so that it's easier for people to help you out.
Hope this helps!
EDIT: Now that I can see your example, the problem is that the default styles in bootstrap.css have a higher specificity than your styles. Something like:
input.searchButton
Should solve the problem.
This is probably a case of specificity, where a more specific set of conditions is taking precedence.
Try this:
.searchButton {
height: 31px !important;
width: 33px !important;
cursor: pointer;
border: none;
background:url(../img/searchButton-Off.png) no-repeat;
}
Or you could try:
form.appnitro .searchButton {
wrong!
you have
you have too use :
input[type=button].[class name]
or you can use:
<button class='x' ></button>
and Css:
button.x{
}
background: url("../img/searchButton-Off.png") white no-repeat 9px;
just change 9px to any px and do it accordingly and also increase height:50px weight:50px