I am trying to align a search button and search box, I have this working in google chrome but not IE or mobile Safari/Chrome.
The CSS I am using is:
#search input {
background: none repeat scroll 0 0 #fff;
padding: 10px;
border: 0 none;
color: #7F7F7F;
font: 20px 'Open Sans', sans-serif;
transition: background 0.3s ease-in-out 0s;
width: 500px;
height: 40px;
margin: 0 auto;
display: inline-block;
}
#search button {
padding: 21px;
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 60px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 60px;
border: 2px solid #fff;
margin: 0 auto;
display: inline-block;
margin-top: 3%;
}
HTML:
<form id="search" action="/index.php">
>
> <p><b></b> <input type="text" class="search" placeholder="Enter A
> Domain Name or IP address."name="domain" id="domain" value="">
> <button value="lookup"></p></button> </form>
Any help will be appreciated!
The web address is http://rapidwhois.uk
please try:
#search button, #search input {
vertical-align: middle;
}
Well you have other issues on your layout as well, but the basic problem is the fact that you are missing the correct vertical-align in your CSS.
Simply add in vertical-align: text-top to both the INPUT and the BUTTON tags and remove the margin from the button and you are set.
Then you simply need to use a padding on the container element in order to get the same layout as before. (Would give you a better example, but you do not have an isolated test case and I simply confirmed this in my IE.)
Here this should do it for you, wrap the button with a label like this
<label for="btn">
<input type="text" class="search" placeholder="Enter A Domain Name or IP address."name="domain" id="domain" value=""/>
<button id="btn" value="lookup">lookup</button>
</label>
Related
I am new to css/html and want to know the css style for the input control of type number. I am getting the default style(two arrows one in one column) with the following code.
<input type="number" placeholder="0">
Default Style:
But i want the css style for the image given below(Highlighted with red circle).
I know with the similar question asked previously
Customize appearance of up/down arrows in HTML number inputs
here it gives the following spin control which i don't want.
My requirement is very specific to the 2nd image which i have attached.
Yes, you can (webkit only I assume):
<style>
input[type=number] {
height: 30px;
line-height: 30px;
font-size: 16px;
padding: 0 8px;
}
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
cursor:pointer;
display:block;
width:8px;
color: #333;
text-align:center;
position:relative;
}
input[type=number]:hover::-webkit-inner-spin-button {
background: #eee url('http://i.stack.imgur.com/YYySO.png') no-repeat 50% 50%;
width: 14px;
height: 14px;
padding: 4px;
position: relative;
right: 4px;
border-radius: 28px;
}
</style>
<input type="number" value="0">
See JSFiddle method 1
See JSFiddle method 2
Reference
EDIT: I've added the relevant code below at the bottom of this question. As you'll see there, the button is wrapped within a div. Also, this problem only occurs in one browser, that being Firefox, and I'll be using a hack to target that browser only.
I have an input element of type submit (i.e., basically a submit button). The text displayed in this element, as defined in the element's value attribute, appears too low (i.e., too close to the bottom of the button instead of vertically centered). The button has a fixed height.
Naturally, I want to move the button's text, as defined in the value attribute, one or two pixels upwards.
I've tried a few things with the button's padding (top and bottom), but that didn't change anything. [Is that to be expected, BTW?] Therefore, I would like to use relative positioning to move the text upwards a bit.
The thing is, however, that I need to target the text itself, NOT the input/button element. And that's of course because the button itself should stay at its current location, I only want to move the TEXT displayed on the button.
Thus my question: Is there a way, in CSS, to target not the button but only its displayed text (as defined in the value attribute) ?
Of course, other solutions (preferably CSS only) are welcome as well.
Code:
HTML:
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<div class="erom" id="erom2">
<input id="zoekknop" style="float: right" type="submit" method="GET" value="Search!" />
</div>
</form>
CSS:
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
}
.erom {
height: 100%;
display: inline-block;
box-sizing: border-box;
}
#erom2 {
border: solid 1px #452F5D;
width: 27%;
display: inline-block;
box-sizing: border-box;
}
#zoekknop {
float: right;
height: 100%;
color: white;
font-size: 19px;
box-sizing: border-box;
background-color: #446666;
color: white;
letter-spacing: 2px;
border: solid 1px white;
width: 100%;
}
And finally the part where I'm targeting Firefox only, and where I can't get the padding working (and to be sure, the "media query" (it's not really a media query) does work, and in any case I've also tried this without the media query, i.e. as part of the regular CSS):
#-moz-document url-prefix() {
#zoekknop {
padding-top: -1px !important;
padding-bottom: 9px !important; // I set it to 9px for now, so that I could clearly see if it worked
}
}
For some reason form elements are particular and quirky about font.
Assign a font to the <submit>'s parent, then use font: inherit on the <submit> button.
On the <submit> assign line-height of 1.4 to 2 (notice there's no unit like px or em.) I actually have the line-height assigned by inheriting the font from <form> 1.4.
Set width using the ex unit of measurement. One ex is as wide as ax character, making it a great way of gauging how much space you are using in relation to your text. I used 9ex for a 6 character word (i.e. Submit).
This ruleset may help you for Firefox:
input::-moz-focus-inner {
border: 0;
padding: 0;
/* Some users have said these last two are
unnecessary or should be -2px */
margin-top:0;
margin-bottom: 0;
}
Here's some changes I did to your button and search field:
#zoekknop {....
....
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0;
}
Review the Snippet below:
#form {
font: 400 16px/1.4'Verdana';
}
#form .sub {
font: inherit;
width: 9ex;
color: blue;
border-radius: 5px;
}
#form .sub:hover {
color: cyan;
background: #888;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#zoekform {
height: 29px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 9px;
font: 400 16px/1.4 'Verdana';
}
#zoekform #zoekknop {
color: white;
font-size: 18px;
box-sizing: border-box;
background-color: #446666;
color: white;
border: 2px double white;
line-height: 1.65;
vertical-align: baseline;
}
#search-text {
line-height: 1.75;
vertical-align: baseline;
padding: 4px 3px 0
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
<form id="form" name="form">
<input type="submit" class="sub" value="Submit" />
</form>
<form id="zoekform">
<input type="text" class="" id="search-text" name="search-text" placeholder="Search">
<input id="zoekknop" type="submit" method="GET" value="Search!" />
</form>
This should work
#buttonID{
width: 500px;
height: 500px;
padding-bottom: 100px;//pushes text up inside the button
}
Make sure you define the height, width, line-height, font-size, and padding of the button. Then you should be able to manipulate the padding and line-height to get the result you want. It sounds like the button may be inheriting a line height that is causing the issue.
Targeting the text itself isn't the way to go about this. Would be helpful to see the CSS and HTML of the button, and note which browser the issue appears in.
i got quite simple thing to do, but i can't find way out for that.
let's say i got form, i want to add inputs one below another, however next to one of them there will be label (only next to one of them).
I would like to make it, so all the classes are equal size (but to make it responsive). However, i would like to make that input with label next to it, to share the space with label, so it will be next to each other, not one under another if user would open that in little screen.
hope you guys got what i mean. :P
Thank you!
EDIT
<div class="mainbox-form">
<form>
<div class="mainbox-input">
<input type="text" name="store-name" placeholder="Name"><br>
</div>
<div class="mainbox-input">
<input type="text" name="store-subdomain" placeholder="Subdomain">
<label name="store-subdomain">.label.here</label><br>
</div>
<div class="mainbox-input">
<input type="email" name="store-email" placeholder="Email"><br>
</div>
<div class="mainbox-input">
<input type="password" name="store-password" placeholder="Password"><br>
</div>
</form>
</div>
.mainbox-form
{
text-align: center;
max-width: 50%;
min-width: 350px;
margin: 0 auto 0 auto;
}
.mainbox-input label
{
font-weight: bold;
color: #606060;
}
.mainbox-input
{
max-height: 57px;
}
.mainbox-input input
{
background: #f3f3f3;
width: 80%;
border: none;
color: #606060;
margin: 3px auto 3px auto;
padding: 15px 40px;
font-size: 18px;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 59%;
}
.mainbox-input input:focus
{
outline: none;
}
.mainbox-input input:active
{
outline: none;
}
http://jsfiddle.net/twjw113w/
Here's the code I've got as for now. The problem I have with it is that, the labeled input is not sticked to the left, and is behaving differently. i bet you can see it yourself better there, than I would explain it.
You need to add display: inline-block and width to the label and input element that you want on the same line.
.mainbox-input label
{
font-weight: bold;
color: #606060;
display:inline-block;
width:35%;
}
.mainbox-input input[name=store-subdomain]
{
max-width: 40%;
display:inline-block;
}
Is this how you wanted it?
jsfiddle
Please remove the css property below:
.mainbox-input{
max-height: 57px;
}
Modify the css below:
.mainbox-input input[name=store-subdomain]{
max-width:100%;
}
.mainbox-input input{
width:auto;
display:table
}
.mainbox-input label{
display: table;
padding: 0px 40px;
}
Visit this url:
http://jsfiddle.net/sarowerj/e41653o4/
I have a few buttons on my html page created like this:
<button type="button" class="read-more">Read More</button>
they are responsive in chrome and Safari - they work perfectly fine. However when I tested them in mozzilla Firefox they do not respond at all. Does anyone know what the issue could be?
I tried doing them like this :
<button type="button" class="read-more">Read more</button>
This links the button, but it does not show the clickable curser and does not pick up some of the css (e.g. the underline and the font color)
Your HTML is invalid. Use a validator. A button cannot contain an anchor and an anchor cannot contain a button. Different browsers recover from that error in different ways.
If you want to link somewhere, use an anchor.
If you want to submit a form, or have a control that does nothing but run some JavaScript, use a button.
Then apply CSS to make it look the way you want.
As Quentin said, your HTML is invalid. If you REALLY wanted to use the default buttons as redirect you could create a workaround like this:
<form action="REDIRECTURLHERE"><input type="submit" value="BUTTON TEXT"></form>
where REDIRECTURLHERE would be the location to put your destination URL in, and BUTTON TEXT the place to enter your button text.
The way you have used Button and Anchor tags are kind of invalid.
Either you use an ANCHOR tag to make a redirect or you can use the following input button. On clicking this button, will not submit the form:
<input type="button" value="Read More" class="read-more" />
If you want the form to be submitted, then you have to use the submit input type.
I have also faced issue with button is working fine in chrome but not in Mozilla fire fox. I did the below changes in code then it's working fine in both the browsers.
Old code:
<input type="search" name="focus" class="form-control search-box" placeholder="{{Messages.Label.search}}" style="width:100%"
ng-model="dashboardCtrl.searchvalue" ng-change="dashboardCtrl.searchChangeHandler()" required >
<button class="close-icon" type="reset" ng-click="dashboardCtrl.removeSearchTab()"></button>
<img ng-src="/assets/images/search-icon.svg" width="18px" style="position:relative;left: 90%;top: -30px" ng-show="dashboardCtrl.searchvalue === undefined"/>
New code:
I changed above button as div and css remains the same as below.
.search-box,.close-icon {
position: relative;
}
.search-box {
border: 1px solid $color_nobel_approx;
outline: 0;
border-radius: 0px;
padding-right:22px;
margin-top: 3px;
width: 190px;
box-sizing: border-box;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.search-box:focus {
box-shadow: 0 0 2px 2px $color_azure_radiance_approx;
border: 1px solid #bebede;
width: 100%;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: block;
outline: 0;
cursor: pointer;
right: -94%;
top: 2px;
height: 0px;
}
.close-icon:after {
content: "X";
display: block;
width: 20px;
height: 20px;
position: absolute;
z-index:1;
right: 5px;
top: -30px;
margin: auto;
padding: 2px;
text-align: center;
color: black;
font-weight: bold;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
I have a text box and a button, which is described with the HTML/CSS below.
Currently these two elements are appearing with the button slightly lower than the text box. Can somebody please suggest how I can get these two aligned so their middles are on the same horizontal axis? Thanks
update: apparently the outside world can't see this site. I'll post some HTML describing the controls shortly
update 2: This is the code:
<div id="SearchForm">
<form method="get" action="/search/Tabs">
<div class="search-box ActionControl">
<input type="text" value="" name="Search" id="Search">
Search
</div>
<div id="ContentArea"></div>
</form>
</div>
#SearchForm .search-box
{
padding: 25px;
height: 25px;
background-color: #F6E9D8;
border: 1px solid #E7DFD0;
}
#SearchForm .search-box input
{
width: 425px;
}
#SearchForm .search-box a
{
background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:White;
cursor:pointer;
font-size:8pt;
padding-left: 22px;
padding-right:22px;
padding-top: 3px;
padding-bottom: 3px;
}
This is a quick fix... it was only a pixel out to my eyes...
#SearchForm .search-box a
{
... (Your existing styles)
position: relative;
top: -0.1em;
}
Using vertical-align doesn't work for me, so this just shims it.
#search, .search-box a { vertical-align: middle; display: inline-block; }