This question already has answers here:
How to set placeholder value using CSS?
(12 answers)
Closed 1 year ago.
I have a search input and I need to change the content of placeholder which is currently no, but only with css. I have tried but I can't get it...
<input id="search-input" type="search" class="search-field" placeholder="no" value="" name="s" title="Search:">
Here my wrong css:
.seach-field::placeholder{
display: none;
}
.seach-field::placeholder::after {
content: "yes";
}
pd: this is my first time on Stackoverflow, I am sorry if I didn't put it right or if I didn't post it where it should be :(
You can do it whith a some tricks, but is not the correct way to do that, because the placeholder text you write with css is wrote over the text when you write in it.
However I explain how to do it with CSS:
You can use the ::before selector to add some text before any block element.
.wrapper {
position: relative;
}
.wrapper:before {
position: absolute;
content: 'Name';
left: 10px;
top: 2px;
color: #ccc;
}
<p class="wrapper">
<input id="name" type="text">
</p>
I hope I've helped you.
Related
This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 6 months ago.
Can I remove the word Search coming from a file bootstrap with css?
Here my code:
<div id="items-data-table_filter" class="dataTables_filter"><label>
Search:
<input type="search" class="form-control input-sm" placeholder="Search" aria-controls="items-data-table"></label></div>
If you can't remove the text at all, then you could use a combination of text-indent and line-height to hide the text and remove its effect on the layout.
This works by shifting the text off-screen using a negative text-indent and reducing the line-height to 0 to prevent it from pushing the input down.
The input can then be reset by setting it to display: block; to prevent indentation affecting it.
.dataTables_filter {
text-indent: -1000vw;
line-height: 0;
}
/* Reset layout for the input */
.dataTables_filter input {
display: block;
line-height: 1;
text-indent: 0;
}
<div id="items-data-table_filter" class="dataTables_filter"><label>
Search:
<input type="search" class="form-control input-sm" placeholder="Search" aria-controls="items-data-table"></label>
</div>
This question already has answers here:
What’s the point of the ::before and ::after pseudo-element selectors in CSS?
(5 answers)
How to style a checkbox using CSS
(43 answers)
Closed 10 months ago.
The company I work for has an in-house extension of bootstrap classes. I'm having difficulty using the checkbox they provide, so I have to dive into their code. I'm starting with this HTML snippet:
<div class="checkbox XXXbs-checkbox">
<label for="checkbox-id">Some Text</label>
<input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>
Their checkbox css contains this ("XXX" is in place of a string that would identify the company I work for):
.XXXbs-checkbox input[type=checkbox] {
opacity: 0;
margin-left: 4px;
cursor: pointer;
z-index: 1;
width: 100%;
}
Opacity is 0, making the actual checkbox from the above HTML invisible. Meanwhile, they also have this:
.XXXbs-checkbox>label::before {
font-family: XXX-icon;
content: "\e903";
font-size: 32px;
position: absolute;
top: -15px;
left: 0;
}
to place an empty checkbox before the label, and this:
.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
content: "\e904";
color: #000
}
to render a box with a check mark in it.
My question is, why would you use this approach? Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Why would you draw a fake checkbox in front of the label instead of just styling the actual checkbox?
Because the amount of styling you can apply to a checkbox itself is very, very limited.
This question already has answers here:
Add a text suffix to <input type="number">
(4 answers)
Closed 3 years ago.
I have an html input that looks like this:
<input type="number" min="4" max="100" step="1" name="myInput" value="33">
I am populating the value from a cookie/storage that is getting set from a previous screen. The previous screen is asking for a party size.
From a UX perspective, it i not clear what 33 means in this screen. Since I am populating the input, I cannot use placeholder text. This is why I am wondering if there is a way to inject "People" after the value somehow.
I really like how clean the UI looks without visible form labels, so if possible, I'd like to stay away from adding them.
Here is what I have now:
This is what I am trying to accomplish (the red text):
Perhaps it is as "simple" as a background image, but I'd like to keep the spacing nice and sharp. Thank you for any suggestions!
Try something like this, perhaps this will help you point you in the right direction:
HTML:
<label data-placeholder="people">
<input type="number" min="4" max="100" step="1" name="myInput" value="33">
</label>
SCSS:
LABEL {
position: relative;
&:after {
content: attr(data-placeholder);
position: absolute;
color: red;
z-index: 1;
top: 1em;
right: 1em;
}
INPUT {
width: 200px;
box-sizing: border-box;
padding-right: 5em;
}
}
This question already has answers here:
How to display image in place of checkbox?
(8 answers)
Closed 8 years ago.
I'm involved in making bus booking sites project. I need to use the seats to book.
So, can we replace checkbox with the image. If Possible, please tell me.
Or, if there is any other possibility, please furnish me with ideas.
Thnku.
offer a simple solution to css DEMO
HTML
<input type="checkbox" id="checkbox-id" /> <label for="checkbox-id">Some label</label>
CSS
input[type="checkbox"] {
position: absolute;
left: -9999px;
}
input[type="checkbox"] + label {
background: url(http://xandeadx.ru/examples/styling-checkbox/checkbox-sprite.gif) 0 0 no-repeat;
padding-left: 20px;
}
input[type="checkbox"]:checked + label {
background-position: 0 -32px;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have my html set up like so ([..] is an input field). I'm also using Foundation 5.
[..][..][..][..][..][..][..][..]
and I want to number each input, with the number being right below (or above) each input field. The css for the input fields is
.gant{
display: inline !important;
width:40px !important;
margin:auto !important;
background-color:white !important;
}
I've checked online pretty thoroughly, but every recommendation I've come across seems to push each input field onto a separate line.
If thats not descriptive enough I can put the html online and link to it.
I would wrap the inputs within another tag and inline-block that tag, something like this http://codepen.io/leopic/pen/korwz
I can see two options basically - wrapping each <input> in another element, or having a list of all the inputs, followed by a second list of all the numbers (which semantically isn't fantastic.
I've put together an example of using an <ol> with styling to put the number below each field. I think semantically this is a good option, as if you want them numbered it is indeed an ordered list.
Have a look at http://jsfiddle.net/bL5qy/ and let me know if that's the kind of thing you're wanting.
You'll need something to wrap the input fields, and an element around the label part. For something like this:
<div class="wrapper"><label for="input1">1</label><input id="input1"/></div>
This CSS should do what you want
.wrapper {
display: inline-block;
position: relative;
}
.wrapper label {
position: absolute;
top: 1.5ex;
}
Here is the most simple way :) no other elements are required. Also, you should avoid using !important declarations as much as possible, they will make your CSS harder to maintain.
Have a fiddle - Fiddle Link!
HTML
<input type="text" id="one" />
<input type="text" id="two" />
<input type="text" id="three" />
<input type="text" id="four" />
<input type="text" id="five" />
<label for="one" class="clear">1</label>
<label for="two">2</label>
<label for="three">3</label>
<label for="four">4</label>
<label for="five">5</label>
CSS
input {
width: 20px;
margin: 0 2px;
display: block;
float: left;
}
label {
width: 20px;
margin: 0 4px;
display: block;
float: left;
text-align: center;
}
.clear { clear: left; }