Making links stick to a textfield - html

Hey guys I'm making a new layout for my community and now I'm slicing him into pieces. Their is only 1 problem I designed a textfield where the user can search but there are 2 links right after the textfield. I don't know how to let them stick together. I've tried something and it actually works in google chrome, but in it doesn't.
.searchbox {
background: url('../images/searchbox.gif') no-repeat;
border: 0px;
height: 24px;
width: 308px;
font-size: 11px;
padding: 1px -15px 0px 10px;
}
.options {
background: url('../images/options_active.gif') repeat-x;
background: url('../images/options.gif') repeat-x;
font-size: 10px;
padding: 6px;
margin: 0 0 0 -10px;
color: #6b6b6b;
}
.options:active {
background: url('../images/options_active.gif') repeat-x;
color: #000;
}
.button {
background: url('../images/button_bg_active.gif') repeat-x;
background: url('../images/button_bg.gif') repeat-x;
color: #fff;
font-weight: bold;
font-size: 11px;
padding: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
}
.button:active {
background: url('../images/button_bg_active.gif') repeat-x;
}
this is what I've got in my css file
this is my html file:
<div id="topbar">
<form method="post" action="">
<input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." />
Advanced options
Zoeken!
</form>
</div>
Here is what it looks in firefox:
alt text http://img411.imageshack.us/img411/8282/searchj.png
and this is what it looks in chrome:
alt text http://img22.imageshack.us/img22/2655/searchchrome.png

To start with you might also want to use -webkit-border-top-left-radius: 5px and -webkit-border-bottom-left-radius: 5px to get that same effect with Chrome and Safari.
I would do something like the following:
.form {
position: relative; /* Alows you to absolutely position child elements */
}
.searchbox {
float: left;
position: absolute;
}
.options, .button {
float: right;
position: absolute;
}
.options {
right: -30px; /* Width of the button to its right */
}

Related

How to change the size of icon inside input using css?

I have a simple input which contains an icon on the right side and text on the left side
Here is what I would like to have in mobile version:
here is what I have so far in desktop version
HTML
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
csss
#media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
}
#input-icon {
background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
background-position: right;
/* opacity: 0.4; */
}
**
UPDATE
**
To simplify things here is my jsfiddle with the icon I am using :
http://jsfiddle.net/Mwanitete/z0x6uta2/2/
what do I need to do get what I want? I tried opacity but didn't work as expected?
.form_input {
font-size: 12px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: 1px solid #ccc;
border-radius: 5px;
}
#input-icon {
background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
background-size: 7px;
background-position: right;
opacity: 0.4;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Result Preview:
You can also use this.
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
background-position: 100%;
background-size: 4%;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Here is solution based on Dementic's answer ,
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
background-position: right;
background-size: 12px;
height: 4px;
opacity: 0.4;
}
.form_input::-webkit-input-placeholder { /* WebKit browsers */
color: transparent;
}
jsfiddle for anyone interest to see the expected result
http://jsfiddle.net/Mwanitete/z0x6uta2/16/
Thanks all for help #StopActa2Though
you are able to change icon size inside the input field using background-size:20px;
example is given below according to your code
#input-icon {
background-size: 20px;
}

CSS3 Rendering Different between browsers

I'm a fairly new coder, so I hope this question makes sense.
I am building a website and currently working on the Navigation bar.
As I am building the search bar, using a sprite image I have come across a problem when viewing the site live in different browsers.
the search button image renders differently on safari compared to firefox, chrome, IE and Opera.
<hgroup>
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/>
</form>
<p class=login>LogIn<p class=arrow-down></p></p>
<p class=line>|</p>
<p class=signup>Sign Up</p>
</hgroup>
this is the CSS3 code for it:
#header-search {
overflow: visible;
}
input.searchbox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #af5354;
border: 1px solid #af5354;
border-radius: 5px;
color: #fff;
float: left;
height: 19px;
margin-left: 0.5em;
margin-top: 0.2em;
outline: 0 none;
padding-left: 0.5em;
padding-top: 0.3em;
text-align: left;
width: 220px;
}
input.searchbox {
margin-top: 00.3em;
}
input.searchbox:focus {
background: #e87476;
background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));
outline: 0;
color: #FFF;
}
*::-webkit-input-placeholder {
color: #FFF;
}
*:-moz-placeholder {
color: #FFF;
}
*::-moz-placeholder {
color: #FFF;
}
*:-ms-input-placeholder {
color: #FFF;
}
#header-search input.button {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
float: left;
border: none;
background: url("../../assets/images/sprite.png") -142px -7px;
overflow: hidden;
}
#header-search input.button:hover {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
background: url("../../assets/images/sprite.png") -142px -47px;
float: left;
border: none;
}
Any help would be appreciated.
thank you.
The view of html elements is different in each web browser and it's all because each web browser may have different engine. If you would like to have similar display on each web browser maybe you should try use boostrap?
1.You can download it from: http://getbootstrap.com/
2.Next you have to put the file bootstrap.min.css in the location where is your index.html
3.Next include the command
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
between
<head></head>
markers.
The second case- If You use html5 and css3 You don't need to use
-webkit-border-radius:
Just use:
border-radius:
For all(actual versions) web browsers it should be ok.
Or maybe I don’t understand your question.. hmm?

Trying to get two HTML inputs side by side

So I've spent some time trying to figure this one out, but I've ended up turning to StackOverflow for help. I'm trying to get my search bar and go button to display on one line and am having trouble doing this.
The html code for the inputs is:
<nav class="sidebar">
<input type="text" id="search" placeholder="search">
<input type="button" name="button" value="Go" class="goButton">
</nav>
And the CSS for the two inputs is as follows:
#content .sidebar #search {
width: calc( 100% - 45px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
Can anyone suggest a fix for this? Currently, the inputs display as follows:
Thanks in advance.
It gets aligned when the text box is a little smaller and the margin-top of the button is removed:
#content .sidebar #search {
width: calc( 100% - 60px );
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
margin-top: 8px;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
}
FIDDLE: http://jsfiddle.net/s0y93L87/
try put this:
#content .sidebar #search {
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
margin-bottom: 21px;
float: left;
width: 200px;
}
/* Go button for search*/
#content .sidebar .goButton {
position: relative;
top: -48px;
width: 45px;
background-color: #BA2022;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 48px;
text-align: center;
font-size: 14px;
margin-bottom: 21px;
float: left;
}
There are a few reason why applyingwidth: calc( 100% - 45px ); to the text input isn't leaving enough room for the 45px-width button:
The browser is adding padding to the text input (+2 pixels for left and right padding) (at least in Chrome)
The browser is adding a border to the text input (+2 pixels for left and right borders) (at least in Chrome)
Because the text input and button are not on the same line, there is a single whitespace character separating them, adding more width.
Define explicit padding and border for the text input so browsers can't reset it, and adjust the 45px to 47px accordingly (to account for left and right 1px borders):
#content .sidebar #search {
border:1px solid #aaa;
padding:0;
width: calc( 100% - 47px );
}
And remove the whitespace between the two inputs by putting them on the same line in the HTML:
<input type="text" id="search" placeholder="search"><input type="button" name="button" value="Go" class="goButton">
I also removed the top: -48px from your .goButton CSS.
Using a CSS reset can help eliminate this kind of problem of browsers adding unexpected styles.
Result: http://jsfiddle.net/k305a0jo/1/
Have you tried put it inside a table? something like this:
<nav class="sidebar">
<table>
<tr>
<td class='search'>
<input type="text" id="search" placeholder="search">
</td>
<td class='go'>
<input type="button" name="button" value="Go" class="goButton">
</td>
</tr>
</table>
</nav>
.sidebar #search {
width: calc(100%-45px);
border-radius: 0px;
height: 42px;
text-align: center;
color: #333333;
font-size: 14px;
}
/* Go button for search*/
.sidebar .goButton {
top:-48px;
background-color: #BA2022;
width:45px;
color: #F3EBDE;
border-style: none;
text-transform: uppercase;
border-radius: 0px;
height: 42px;
text-align: center;
font-size: 14px;
}
td.search {
}
td.go {
}
tr {
width: calc(100%);
margin-bottom: 21px;
}
Here is a jsfiddle:
http://jsfiddle.net/yzmkxfa7/4/

How to add button inside input [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 3 days ago.
Improve this question
How do I visually place a button inside an input element as shown below?
The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.
How do I accomplish this with modern CSS?
The button isn't inside the input. Here:
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
Use a Flexbox, and put the border on the form.
The best way to do this now (2022) is with a flexbox.
Put the border on the containing element (in this case I've used the form, but you could use a div).
Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
Now hide the input by removing its border.
Run the snippet below to see what you get.
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:1px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
outline: none;
}
/* Add the focus effect to the form so it contains the button */
form:focus-within {
outline: 1px solid blue
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<form>
<input />
<button>Go</button>
</form>
Why this is good
It will stretch to any width.
The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
The input text will not go behind the button.
Caveats and Browser Support
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}
<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Demo: On fiddle
Source: Speckyboy
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
This can be achieved using inline-block
JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
Button
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>

adjusting background color gradient of a submit button with css

Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>