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;
}
Related
Is it possible to hide the input field in the primeng calendar, and show only the icon? I don't want to change the p-calendar element to inline, but just display the icon that will pop up the calendar.
component.html
<div class="ui-g-12 ui-md-4">
<p-calendar class="foo-cal" appendTo="body" readonlyInput="true" dateFormat="yy/mm/dd" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
I tried the following, but no success:
body .ui-calendar.ui-calendar-w-btn .ui-inputtext {
display: none !important;
}
p-calendar span input {
display: none !important;
}
However, with the devtools in the browser if I add the display: none; property to the element, it will hide leaving the icon only. Any ideas how can I make this to render the html file without the input field?
You just need to create a custom style for the p-calendar component
<div class="ui-g-12 ui-md-4">
<h3>Icon</h3>
<p-calendar styleClass="only-icon" [(ngModel)]="date" [showIcon]="true"></p-calendar>
</div>
style.scss
.only-icon {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
demo ⚡⚡
apply this style to all componnt without any custome class
p-calendar {
.ui-inputtext{
display: none;
}
button.ui-datepicker-trigger.ui-calendar-button {
border-radius: 4px !important;
}
}
the style above gone to apply to a p-calendar to all project.
I think if you set display none for input , users can't see calendar when click in there but you can use this css code for input and show your icon as image in background-image.
input{
border: none;
background-image: url(your-icon-address);
color: transparent;
text-shadow: 0 0 0 #fff;
cursor:pointer;
/*width:somthing; if you need*/
/*height:somthing; if you need*/
}
input:focus{
outline:0;
}
you can set width and height input same as icon.
How do create a form like in the one in Bootstrap 4 http://v4-alpha.getbootstrap.com/components/forms/ in Materialize CSS. The following only shows an underline for the input field and not a containing box?
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
You can override the Materialize CSS styles by using " !important ".
I have made a CodePen to demonstrate the same using the markup given. (https://codepen.io/anon/pen/yzVXWN)
Also note that the I have included the Materialize CSS stylesheet in the CodePen to test this.
You can copy and paste the CSS in between the opening and closing <style> tags
inside the head like this:
<style>
#first_name{
display: block!important;
width: auto !important;
padding: .5rem!important;
border: 1px solid rgb(0,0,0);
transition: all 1s;
border-radius: .25rem!important;
box-shadow: none;
}
#first_name:focus{
border-color: blue!important;
}
label{
color:#9e9e9e!important;
}
</style>
Hope that helps :)
One can apply CSS styling to a placeholder, such as for Firefox:
::-moz-placeholder { text-decoration: underline; }
However, what I would like to do is underline a single letter in a placeholder, for the purpose of hinting at a hotkey for the user to press (similar to Windows in file menus), such as making the F in First Name underlined below:
<input type='text' placeholder='First Name' />
Is there any way to do this?
I think you can achieve this with CSS only in google chrome. For example:
You can select the first letter of placeholder
::-webkit-input-placeholder::first-letter {
color: red;
text-decoration:underline;
}
Result:
The text-decoration does not render when set with :first-letter in Chrome (Version 39.0.2171.71). So we can achieve the underline with border-bottom.
::-webkit-input-placeholder::first-letter {
color: red;
border-bottom: 1px solid red;
}
Result:
UPDATE: text-decoration works fine on Chrome 41.0.2235.0 Canary.
Here is the DEMO: http://codepen.io/MizR/pen/myeJZe
Unfortunately, this solution doesn't work on Firefox. :(
Update 2: No longer works. :(
You can use an absolute-positioned u tag, being careful to use the same font and padding as the input.
You'll need to hide the u when the input has content:
document.getElementById('iFirstName').onkeyup= function() {
var u= document.getElementById('uFirstName');
u.style.display= this.value>'' ? 'none':'inline';
};
u {
position: absolute;
font: 10pt verdana;
padding: 4px;
}
input {
padding: 3px;
font: 10pt verdana;
border: 1px solid #ddd;
}
<u id="uFirstName">F</u>
<input id="iFirstName" type='text' placeholder='First Name' />
If you are comfortable using contenteditable instead of input, you can try:
http://jsfiddle.net/lotusgodkk/GCu2D/473/
HTML:
<div contenteditable="true" data-ph="First Name">Hello</div>
CSS:
div {/*For styling div similar to input*/
width:300px;
height:24px;
border:1px solid grey;
}
div[contentEditable=true]:empty:not(:focus):before {
content:attr(data-ph);
color:grey;
}
div::first-letter {
text-decoration:underline;
}
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*/
}
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.