This question already has answers here:
Placing <label> text inside the border of a text input
(7 answers)
Text in Border CSS HTML
(10 answers)
Closed last year.
I would like to put inputs label on border cross section and would like to hide borders under label like this
I did this by simply making label background white but it obviously doesn't work if I place it inside grey div any other solution for this?
Also I'm using quasar inputs so I'm limited to css only solutions
Use fieldset
textarea {
width: 100%;
border: none;
}
<form>
<fieldset>
<legend>Your heading</legend>
<textarea></textarea>
</fieldset>
</form>
You can use position absolute for the label and the use top and left for position your label. Why using position? Then you have more flexibilty. Maybe you can push the label to the right and so on.
* {
font-family: arial;
}
/** float container */
.float-container {
border: solid 1px #ccc;
box-sizing: border-box;
margin-bottom: 8px;
padding: 0 8px;
position: relative;
width: 300px;
}
input {
border: none;
font-size: 16px;
outline: 0;
padding: 16px 0 10px;
width: 100%;
}
label {
font-size: 12px;
position: absolute;
top: -6px;
left: 10px;
background: white;
}
<div id="floatContainer1" class="float-container ">
<label for="floatField1 ">Label 1</label>
<input type="text" id="floatField1" data-placeholder="Placeholder 1">
</div>
Related
I'm working on this code. I would like to add some space around this input field:
<span class="theSpan">
<h:inputText id="search" class="input_style" value="#{accounts.searchString}"></h:inputText>
<h:commandButton value="Search by title" action="#{bookBean.searchByTitle(accounts.searchString)}">
<f:ajax execute="search" render="output"></f:ajax>
</h:commandButton>
</span>
CSS:
.input_style {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
/* font-family: Cambria, Cochin, Georgia, serif;*/
/* font-size: 16px;*/
/*background-position: 270px -10px;*/
/* background-image: url('http://www.kirupa.com/images/search.png');*/
background-repeat: no-repeat;
margin-bottom: 30px;
}
.theSpan {
vertical-align: baseline;
}
Visual result:
How can I add some space between the input filed and the table? Also how can I place the text "Search by title" at line line with input field?
Add margin after the input-style
.input_style{
margin-bottom:10px;
}
padding creates space inside the element and margin creates outside the element so you need to use margin.
Coming to "Search by title" use line-height css in this and line-height should be equal to height of input
To put space between two elements use margin (which adds space outside of the borders of your element), not padding (which adds space inside the border of your element).
To vertically align the text next to the input, place it inside of a span element and apply the following CSS to that span.
Since a text field and a span are both inline elements, they should semantically both be placed into a container (block level) element. That is the element that should get the margin applied to it.
.input_style {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
background-repeat: no-repeat;
}
.theButton {
vertical-align: baseline;
}
div { margin-bottom: 30px;
border:1px solid red; /* only here to show the layout */
}
<div>
<input type="text" id="search" class="input_style" >
<button class="theButton">Search By Title</button>
</div>
<div>
This is the next item in the flow of the document.
</div>
Another way to solve this issue is to simply make the button the same
height as the input field, then alignment isn't necessary since both elements are the same height:
/* Note that this rule now applies to the input field and the button */
.input_style, .theButton {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
background-repeat: no-repeat;
}
/* Now we just reset aspects of the button that are different
from the input field */
.theButton {
width:auto;
border:0;
}
div { margin-bottom: 30px;
border:1px solid red; /* only here to show the layout */
}
<div>
<input type="text" id="search" class="input_style" >
<button class="theButton">Search By Title</button>
</div>
<div>
This is the next item in the flow of the document.
</div>
I would wrap your entire block in a div tag. That way you can easily control both the spage around the form and the line height alignment.
Add CSS
.my-form-wraper {
/*set margins, padding, line-height, etc. here ^/
}
And HTML:
<div class='my-form-wraper'>
<h:inputText id="search" class="input_style" value="#{accounts.searchString}"></h:inputText>
<h:commandButton value="Search by title" action="#{bookBean.searchByTitle(accounts.searchString)}">
<f:ajax execute="search" render="output"></f:ajax>
</h:commandButton>
</div>
My issue was I have this nice font set and I use that to place custom icons next to my buttons. (ie: see here)
But now I want to create an input box and put an icon before it like HERE
But instead of a background image I want to put a font in the before content, is this possible?
CSS
.input-box { position: relative; }
input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; }
.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }
HTML
<div class="input-box">
<input value="" autofocus="autofocus"/>
<span class="unit">To;</span>
</div>
check following example here
http://jsfiddle.net/pZLcg/52/
I have created the following jsFiddle to demonstrate my problem (or lack of understanding more like)
http://jsfiddle.net/gRCS6/
And Code here
<div id="scoreboard"></div>
<canvas id="game">
Your browser does not support canvas.
</canvas>
<div id="controls">
<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>
</div>
#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
margin:0px;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;;
}
#controls {
margin-top: -5px;
padding:0px;
}
button {
border: 1px solid #000000;
margin-left:0px;
background-color:#333333;
color: orange;
width:82px;
height: 40px;
}
Why does the div with id "controls" need a margin-top of -5px to make it touch the canvas above it?
What is taking up that 5 pixels?
What is stopping the 3 buttons from being next to each other with no space between them?
"Why does the div with id "controls" need a margin-top of -5px to make it touch the canvas above it?"
Like ralph.m pointed out, can be fixed by adding
canvas {
display: block;
}
"What is stopping the 3 buttons from being next to each other with no space between them?"
Well, since there are spaces (the character ' ') between the button elements in the html code you will see those spaces between the buttons when the page is displayed. You can either remove the spaces:
<button type="submit" id="newGame">New</button><button type="submit" id="pause">Pause</button><button type="submit" id="help">Help</button>
Instead of
<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>
Or you can try to fix it with css styling, for example by adding float: left; to the button selector.
The canvas element is display: inline (or is it inline-block?) by default, which means by default there is a gap at the bottom so that it will align with the baseline of any text beside it.
You can change this by setting the canvas to display: block or vertical-align: bottom.
It's a similar problem with the buttons, which are display: inline-block, meaning that there is space between them (as there is a natural space between words). As mentioned in the chosen answer, removing the white space is an option, but a more elegant solution is as follows:
#controls {word-spacing: -2em; display: table; width: 100%;}
button {word-spacing:0;}
Answer to Q1: Check this topic. Different browsers have different algorythm, so you should some extra parameters for body css.
body
{
margin: 0;
padding: 0;
}
Answer to Q2: Avoid using to close button tab. is not necessary, if you remove it, the margin between buttons will disappear. http://jsfiddle.net/gRCS6/5/
<button type="submit" class="button">New
<button type="submit" class="button">Pause
<button type="submit" class="button">Help
Another way to fix the issue is to use absolute positioning to define the exact placement of your controls div. Then you have to ability to define the exact alignment of the buttons regardless of display: inline-block; or display: block; commands.
http://jsfiddle.net/gRCS6/34/
#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
height: 120px;
margin:0px;
position: absolute;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;
}
#controls {
position: absolute;
top: 172px;
margin-top: 0px;
padding: 0px;
}
button {
border: 1px solid #000000;
margin:0px;
background-color:#333333;
color: orange;
width:81.5px;
height: 40px;
}
The question is as the title indicates. Code:
<form action="results.php" style="" target="_top" method="post">
<input type="text" name="search_area" id="username_input" class="search_box" >
<input type="image" onmouseout="this.src='resources/images/button_search_a.png'" onmouseover="this.src='resources/images/button_search_b.png'" src="resources/images/button_search_a.png" value="" class="searchbutton1">
</form>
I would like the input field and the button horizontally aligned as it appears in ff and chrome.
.search_box{
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
color: #C0C0C0;
font-size: 10px;
font-weight: bold;
height: 17px;
margin-left: 10px;
margin-top: 12px;
padding-left: 3px;
right: 8px;
width: 234px;
}
.searchbutton1 {
height: 25px;
margin-top: 6px;
width: 100px;
}
And the form is lying inside a div of width 350px.
It might be due to different css default values across browsers. You might want to try a css reset. There's a load of different ones on the internet, but one of them is over at meyerweb
I am having problems styling form fields with CSS. As you can see below I am trying to get an input field and then to its right the submit button. However for some reason I can't get them to align correctly on any browser, nor can I get them to at least look the same in them and finally everything goes bad when I zoom as well!
I have tried the "line-height:normal !important;" solution, but that doesn't seem to work either...
What am I doing wrong?
IE7 (xp)
FFox (linux)
Chrome (linux)
CSS (nothing for subscribe_form):
#form_box {
position: relative;
height: 35px;
top: 7px;
left: 20px;
}
#subscribe_email {
border: solid 1px #CCC;
height: 24px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
}
#subscribe_submit {
position: relative;
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
HTML:
<div id="box2" class="tbox">
<div id="form_box">
<form id="subscribe_form" action="subscribe" method="post">
Sign Up:
<input class="tbox" id="subscribe_email" type="text" name="email" value="email address" />
<input class="tbox" id="subscribe_submit" type="submit" value="Subscribe" />
</form>
</div>
</div>
Here is what works for me in FF, IE8 and Chrome on XP
#subscribe_email {
border: solid 1px #CCC;
height: 21px;
width: 250px;
font-size: 15px;
color: #999;
padding-left: 5px;
vertical-align: bottom
}
#subscribe_submit {
border: solid 1px #CCC;
height: 25px;
width: 115px;
color: white;
}
I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.
you should try floating them both left, that way they will position themselves.
before aplying any css make all margin and padding zero
by default all browser as thr own margin and padding
by making it zero and then applying ur style it affects eventually