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 :)
Related
This question already has answers here:
Font Awesome icon inside text input element
(25 answers)
Closed 4 years ago.
I have this code where I can add an image inside an input field (it works just fine). However I want to use an Font Awesome icon instead. Can anyone point me in the right direction? Here's what my code looks so far:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('http://iconsetc.com/icons-watermarks/simple-black/bfa/bfa_exclamation/bfa_exclamation_simple-black_512x512.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
NOTE:
I'm trying to use this code: "\f06a" to insert an exclamation font awesome icon
So normally you add FontAwesome Icons either using the class structure such as:
fas fa-exclamation-circle
or you would use the content css style.
content: "\f06a";
The class system relies on the :before pseudo class, which does not work on self-closing HTML elements such as an input or a br tag
The content style also does not work on an input element
What I would do in something like this would be to wrap the input field in a container, add a FontAwesome element as the :after on the element.
<i class="fas fa-exclamation-circle"></i>
and then style my container to look like the input field, while removing some styles from the input field itself such as background color and border. You'll then need to work out the best way to have the FontAwesome icon side beside the form field.
Field HTML:
<form>
<label for="name">Name</label>
<div class="formField">
<input class="valid" type="text" name="name" />
</div>
</form>
Sample Styles
.formField{
border-color: #28a745;
padding-right: 30px;
position: relative;
}
input.valid{
background-color: transparent;
border: 0;
margin-right: 50px;
}
.formField:after{
position: absolute;
transform: translate(0,-50%);
right: 0;
top: 50%;
font-family: "Font Awesome 5 Pro";
content: "\f06a";
}
Depending on what FontAwesome license you have, you might need to change the font-family style to match what you need it to be.
You may need to adjust some of the styles to meet your needs, but this should give you something to start with.
JSFiddle:
https://jsfiddle.net/8jz9ngpu/
I am trying to change the default style of bootstrap checkboxes. I want to add different borders for unchecked, hover and checked. When I try adding a shadow, it works, however border and changing the background color does not work.
input[type="checkbox"]{
width: 20px;
height: 20px;
border: 1px solid #59A29B;
background color: #FFFFFF;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}
Example of it not working.
JS Fiddle
Thanks in advance.
Firstly, this is invalid markup:
<input type="checkbox" value="" id="test">
Option one
</input>
This is valid markup:
<label>
<input type="checkbox" value="" id="test" />
Option one
</label>
Secondly, you cannot style checkboxes this way. See How to style checkbox using CSS?
Thirdly, you have some invalid CSS properties. background color should be background-color, but again this will not work (see the link above).
A quick alternative to border here would be to use outline, but this isn't very desirable:
#test{
outline: 1px solid #f00;
}
JSFiddle demo.
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 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*/
}
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;
}