Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 12 months ago.
Improve this question
I need to make a input box like the image below.
I'm using materialize and CSS.
You can try to use fieldset in your form element.
<fieldset>
<legend>
<label for="username">Username</label>
</legend>
<input type="text" id="username" name="username">
</fieldset>
After that, you can try to edit your styling in your css. Probably to take out the border of the input and change the width of the box.
Basic demonstration using :before.
input {
border: transparent;
text-align: left;
}
input::placeholder {
text-align: center;
}
input:focus {
outline: transparent;
}
.line {
border: 1px solid black;
border-radius: 5px;
width: fit-content;
padding: 10px 0px 5px 0px;
}
.line:before {
content: "username";
position: absolute;
top: 0;
left: 20px;
background-color: white;
padding: 0 2px;
}
<div class="line">
<input type="text" placeholder="me#example.com">
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
I've p-dropdown, and i need to make its placeholder to going up, when i choose one of the sort options, like on screenshots. Is there any way to achieve it with p-dropdow? Cause when i just add placeholder="Sort by" to p-dropdown, it disappears, when i choose sort options
You can do this with raw html and css as follows. You might be able to adapt it to suit your needs.
.input-container {
display: inline-block;
padding: 0.5rem 0.5rem;
position: relative;
border-radius: 0.25rem;
border: 1px solid lightgray;
}
.input-container>label {
display: none;
font-size: 0.6rem;
position: absolute;
background-color: white;
left: 0.5rem;
top: -0.4rem;
padding-inline: 0.25rem;
}
.input-container:focus-within {
border: 1px solid blue;
box-shadow: 0px 0px 8px 0px #0000ff;
}
.input-container:focus-within>label {
display: inline-block;
}
.input-container:focus-within input::placeholder {
opacity: 0;
}
.input-container>input {
outline: none;
border: none;
}
<div class=input-container><label id='placeholder-text' for='cats'>Choose a cat</label>
<input id='cats' placeholder='Choose a cat' type="text" list="catoptions" />
<datalist id="catoptions">
<option>Tiger</option>
<option>Lion</option>
<option>Jaguar</option>
<option>Kitten</option>
</datalist>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is an image of a browse button for uploading file. I want to craete a browse button like in this image. How can I do that?
Here's how you do it! Steps:
We use <input type=file> for uploading files. But we don't actually display it.
We use our own customized button and redirect all clicks to our <input type=file>.
Every time our <input type=file> changes its value, we display it in our span.
We style our file browser form to anything we like.
The following were made similar to the image, as close as possible.
.browse-field {
position: relative;
display: inline-block;
font-family: Arial, sans-serif;
font-size: 15px;
color: #999;
border-radius: 5px;
border: 1px solid #CACACA;
background-image: linear-gradient(rgba(0,0,0,0.15), transparent 13%);
}
.browse-field>input[type=file] { display: none; }
.browse-field .file {
display: inline-block;
margin: 0 0 0 0.8em;
min-width: 25ch; /* Modify as needed! */
}
.browse-field .btn {
margin: 6px 9px;
padding: 5px 14px;
outline: none;
border: none;
border-radius: 4px;
background: #CACACA;
color: #FFF;
font: inherit;
}
/* Modify the following styles as desired */
.browse-field .btn:hover { background: #DADADA; }
.browse-field .btn:active { background: #CACACA; }
.browse-field .btn:focus { box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$(".browse-field>input[type=file]").each(function(){
var inpfile = $(this);
inpfile.change(function(){
inpfile.siblings(".file").text(this.value)
})
inpfile.siblings(".btn").click(function(){
inpfile.click();
})
})
})
</script>
<div class=browse-field>
<input type=file>
<span class=file>No file selected.</span>
<button class=btn>Browse</button>
</div>
Check out this website: http://css3buttongenerator.com
It will help you creating a Button like in your link.
I think do you need this. Chick it out on : click
<div>
<form>
<input type="text" name=""/>
<input type="submit" value="Submit" class="button"/>
</form>
</div>
Css
form input {
border:0px;
margin:0px;
padding:0px;
}
form .button{
padding:5px;
border-radius:3px;
}
div {
border:1px solid #B2B2B2;
border-radius:3px;
width:33%;
height:auto;
padding:5px;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
The community reviewed whether to reopen this question 8 months ago and left it closed:
Needs details or clarity Add details and clarify the problem by editing this post.
Improve this question
While making a form in HTML which will get converted to PDF, I just realized there is no HTML tag that conveys the meaning that the underlined block is a signature (or should be signed).
Any suggestions on how to use a semantically correct HTML element for a signature?
Why not use an input? This way, you get the correct semantics. For example, screen readers will understand that the user is expected to submit information.
.signature {
border: 0;
border-bottom: 1px solid #000;
}
<input type="text" class="signature" />
You can make an input tag, then style it so that it only has a border on the bottom
input {
border: none;
border-bottom: 1px solid black;
}
Simple codepen to illustrate the idea
Edit: Just noticed somebody else posted the same solution while I was typing this. What's with all the downvotes of these answers?
There are a couple of things you could do to achieve this. Option number one is a div with a border-bottom, but that is not editable. That can be viewed here:
#signaturename {
text-align: center;
font-weight: bold;
font-size: 150%;
}
#signature {
width: 100%;
border-bottom: 1px solid black;
height: 30px;
}
<div id="signaturename">
Signature:
</div>
<div id="signature">
</div>
The seconds option, which is editable, would be just a simple input box:
#signaturetitle {
font-weight: bold;
text-align: center;
font-size: 150%;
}
#signature {
width: 100%;
border: 0px;
border-bottom: 1px solid black;
height: 30px;
}
<div id="signaturetitle">
Signature:
</div>
<input type="text" id="signature">
EDIT
Now just thinking of another way to achieve what you would like! :)
You could perhaps use _, but there would be spaces right? False, there is a work around! View here:
#signaturetitle {
text-align: center;
font-weight: bold;
font-size: 200%;
}
#signature {
text-align: center;
height: 30px;
word-spacing: 1px;
}
<div id="signaturetitle">
Signature:
</div>
<div id="signature">
______________________________
</div>
As you can see with this one I am simply just adding the CSS property word-spacing.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some reasons when I enter value in the search box and press the search icon, it does not hot enter . It happens only in FF. In chrome, if you press search icon, it works.
<div class="col-lg-12">
<input id="query" name="query" type="search" class="form-control input-lg" value="">
<button type="submit" class="submit"><i class="fa fa-search"></i></button>
</div>
Styles:
button.submit {
border: 0px;
box-sizing: initial;
padding: 0px;
margin: 0px;
}
.fa-search {
position: absolute;
top: 8px;
right: 22px;
}
Any idea how to fix this? I mean is not the button supposed to be clickable when the icon search is pressed?
Firstly Do not use the <i> tag for icons it's use is for wrapping around text that has a different meaning from the text & is required to be in italic's. Use a <div> instead
The main issue here is your CSS you have markup that is not treated well cross browser.
You have your .fa-search icon set as position:absolute; but its wrapper has no definitions on positioning or height etc; so it wont wrap its child you should give position:absolute; to the button as the button is what your pressing not the icon.
Remove the commented out styles from your class.
.bor-header .bor-header-search .fa-search {
/* top: 8px; */
/* right: 22px; */
color: #5D6161;
font-size: 28px;
/* position: absolute; */
}
.bor-header .bor-header-search button.submit {
background-color: #FFF;
border: 0px none;
box-sizing: initial;
padding: 0px;
margin: 0px;
top: 2px;
color: #5D6161;
font-size: 28px;
position: absolute;
width: 25px;
right: 25px;
height: 25px;
}
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 9 years ago.
Improve this question
html,
<input type="text"/>
<textarea></textarea>
http://jsfiddle.net/kAWDd/
very simple code
if i print, this two have different default design.
i tried border:1px solid black like this, but still it has different design
i want it to be same.
what kind of css do i have to apply?
Any good Solution?
=============
um sorry for the bad question :( I want to copy the default text input field design to the
text area. but the answers in here is applying textarea design to text input field
Here is the solution,don't worry :)
Fiddle :http://jsfiddle.net/nikhilvkd/kAWDd/11/
input[type=text],textarea{
border:solid 1px #000;
padding:10px;
background:#adcff5;
width:200px;
height:30px;
float:left;
margin:0 10px;
}
Demo: http://jsfiddle.net/abhitalks/kAWDd/10/
Markup:
<input type="text"/>
<textarea rows="1"></textarea>
CSS:
input, textarea {
height: 24px; width: 64px;
line-height: 24px;
border: 1px solid black;
display: inline-block;
margin: 0; padding: 0;
vertical-align: middle;
resize: none;
}
Footnote: Bad idea!
See this updated fiddle..you want something like this??
.input_box{
border: 1px solid black;
}
textarea{
resize: none;
height: 16px;
}