I am trying to get the following to display the word "Search" with a border underneath the text itself (not the input window). I attempted to use the CSS placeholder as found here How do I Add border to text in inputfield, but it will not work. Here is my input box (it is a search box for wordpress):
<input id="search" name="s" type="text" onfocus="if(this.value=='Search') this.value='';" onblur="if(this.value=='') this.value='Search';" value="Search" />
I would be much obliged to whomever can give me a fix. I know that it is because I have onfocus= and onblur= instead of just placeholder=, but can't seem to figure it out.
Here is my fiddle http://jsfiddle.net/6Gevu/14/
put a css line: text-decoration: underline; when it says 'search' and remove that style when it's something else. Maybe by adding and removing a class (.underline) to the input field.
You can make use of the :after pseudo-element to generate a border, like so: http://jsfiddle.net/RMJWH/
.search-border {
position: relative;
display: inline-block;
}
.search-border:after {
content: ".";
color: transparent;
position: absolute;
bottom: 5px;
left: 2px;
width: 238px;
border-bottom: 2px solid #000000;
}
You could enclose your input box into a div and style that div to look like your input box. Then force the input box to to only show the bottom border.
<div class="input-box"><input type="text" /></div>
.input-box
{
/*your styles here*/
}
input
{
border:0;
border-bottom:/*some value*/
}
Related
I'm trying to hide a radio-button and use :before to create a custom one.
Here is my CSS:
input[type=radio]{
display: none;
}
input[type=radio]:before{
content: "";
display: inline-block;
width: 19px;
height: 19px;
margin-bottom: 0;
border: 1px solid #ddd;
}
I expect this to generate an empty square. The problem seems to be that when I apply display: none to my input, this also effects the :before element.
Try this
<input type="radio" id="r1" name = "r1" class="rdb" style="visibility:hidden" />
<label for="r1">Male</label>
<input type="radio" id="r2" name = "r2" class="rdb" style="visibility:hidden" />
<label for="r2">Female</label>
Live Demo
Just change the radio itself to be 0px wide by 0px high: so the pseudo element is shown but the radio itself is not visible.
input[type=radio]{ width:0; height:0;}
Example http://jsbin.com/AYIGuyi/1/edit
That is expected behaviour. :before and :after are applied INSIDE elements and so obey the the same display rules.
I think the Checkbox Hack might be what you need.
CSS-Tricks article
Or, there is another way, without using labels:
Set visibility: hidden; to a radio button
Set visibility: visible; to its ::before pseudo element
I was wondering if this is possible:
if I have an input field:
<input type="button" value="some value" class="icon-button" />
and it is styled with gradient background, border, box-shadow, etc.
I want to have the button like an Icon with all its style and the value-text right next to it.
I thought of something like this, but it didn't work:
.icon-button{
display:block;
width: 25px;
height: 25px;
/* gradients, borders, shadows, etc. */
text-indent: 30px;
overflow: visible;
}
Any Idea? I know I could solve it with javascript, but I would like to know if there is a css way to do this.
I don't think you're going to achieve this (at least not very neatly) using an input. If you can amend your markup to use an actual button to submit though, it's pretty trivial:
<button type="submit">Some value</button>
CSS:
button {
line-height: 25px;
border: none;
background: transparent;
cursor: pointer;
}
button::before {
content: '';
display:inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
margin-right: 3px;
/* gradients, borders, shadows, etc. */
background: red;
}
You could use a span rather than generated content if IE7 support is needed. This approach is not possible with an input, as that can't contain any elements, nor can it have generated content.
If you need to use an input, you could achieve the same thing by wrapping it in a span and styling that.
In Google Chrome, radio buttons show a unwanted white background around the circle. This is not shown in Firefox as intended.
Please check these images.
And her is the direct link of the page having the issue (check in Firefox and Chrome)
https://my.infocaptor.com/dash/mt.php?pa=hr_dashboard3_503c135bce6f4
Any CSS tricks that I can apply for Chrome?
this is a known Bug in Chrome which does not have real workarounds.
The only option I see and use at this point of time is to use a sprite sheet with images of the check boxes. I made a fiddle to show it to you with some random sprite I found on the internet:
Workaround
HTML:
<div id="show">
<input type="radio" id="r1" name="rr" />
<label for="r1"><span></span>Radio Button 1</label>
<p />
<input type="radio" id="r2" name="rr" />
<label for="r2"><span></span>Radio Button 2</label>
</div>
CSS:
div#show {
width:100%;
height: 100%;
background:black;
margin: 10px;
padding: 10px;
}
input[type="radio"] {
/* Uncomment this to only see the working radio button */
/* display:none; */
}
input[type="radio"] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
}
input[type="radio"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
cursor:pointer;
}
input[type="radio"]:checked + label span {
background:url(http://d3pr5r64n04s3o.cloudfront.net/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}
You could create your own sprite with radio buttons in your desired design...
Hope that helps, if you have any more questions, let me know.
-Hannes
Wrap the radio element in a div, and set that div's overflow to hidden, and border-radius to 100px. Then set the radio input to display block, and no margin. This worked for me:
Markup:
<div class="radio_contain">
<input type="radio" id="r1" name="r1">
</div>
CSS:
.radio_contain {
display: inline-block;
border-radius: 100px;
overflow: hidden;
padding: 0;
}
.radio_contain input[type="radio"] {
display: block;
margin: 0;
}
I know this is an old thread, but I had this same problem and it took me a while to figure it out, so I'm posting this if someone else has the same problem.
I figured it out quite accidentally really. I was looking at something else and zoomed in on page using ctrl and scroll, and saw that radio button didn't have white background any more (and looked better). So I just put:
zoom: 0.999;
in right css class and that fixed it for me.
I have followed instructions verbatim using border:none and background:transparent, but a border still shows in the my text areas. I am using a background image to customize the look, but can not seem to remove the border.
website in question
http://www.officeyoganyc.com/
markup
<div class="fieldHolder">
<div class="attributeinput1"><input type=text name=email value="email" size="16">
<script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script></div>
</div>
css
.fieldHolder
{
width: 137x;
height: 24px;
background: url(http://www.officeyoganyc.com/themes/zen/zen/images/textarea.png) no-repeat;
margin-left: 209px;
margin-top: 162px;
}
.attributeinput1
{
border: none;
color: #000000;
background: none repeat scroll 0 0 transparent;
color: #000000;
height: 22px;
margin-left: 5px;
margin-top: 5px;
width: 170px;
}
This selector:
.attributeinput1 {
Only styles the <div>. You want the <input /> inside the <div>:
.attributeinput1 input {
By the way, the input tag is self-closing:
<input ... />
Your site might look funky in IE if you omit the />, as it might be treated as the beginning of a block element.
Also, one more thing (just a nuance in HTML), the language= attribute in the <script> tag is depreciated (i.e. unsupported and old). You can safely omit:
language="Javascript"
in your <script> tags.
If you use Google Chrome or Firefox, there is a really useful tool you can use. In Firefox, it's called Firebug. In Google Chrome, it's called something like Inspector.
They both allow you to "inspect" the webpage's layout and see what CSS properties affect what elements.
Here's what I mean. Look at the right-hand-side:
I used this to confirm that your CSS wasn't being applied properly. To activate it, right click on any part of a webpage and click "Inspect".
Hope this helps!
You have too many attributes for your background and border definitions.
This should work.
.attributeinput1 input {
border:0;
background:none;
}
If not then try
.attributeinput1 input {
border:0!important;
background:none!important;
}
Is it possible to make an input HTML element with a value make to look just like a text in a div using CSS? Make the border disappear and make the background color of the input same as the page backgound color.
If I understand correctly: yes.
See: http://jsfiddle.net/zaK7j/
Test CSS:
input, div {
border: 0;
padding: 0;
margin: 0;
background: transparent;
font: 13px sans-serif
}
HTML:
<input type="text" value="Yes." />
<div>Yes.</div>
input[type=text], textarea {background:none;border:0;padding:0;margin:0;}
Will reset your input and also your textarea.
Edit: Note that this works in IE7 and above.
You could use the CSS
input{
border: none;
}
Your htlm like this i presume :
<div>
<input type="text" value="some text"/>
</div>
And your css :
div {
background-color: olive;
}
input[type=text] {
border: none;
background-color: olive;
}