I am new to WordPress . I used a plugin contact form 7, And I need to adjust its width of fields. for now it is 100 % width.
By doing some google I came to know that I need to edit custom CSS for this and I added these lines but still nothing
input[type="text"]
{
background-color: #fff;
color: #000;
width: 50%;
}
And i am using avada theme
I have solved the problem using this:
.wpcf7-form.init label{width:100%; max-width:inherit;}
input[type=text], #respond textarea, .post-password-form input[type=password], .wpcf7-form-control.wpcf7-date, .wpcf7-form-control.wpcf7-number, .wpcf7-form-control.wpcf7-quiz, .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text, .wpcf7-form-control.wpcf7-textarea {
width: 59%;
margin-bottom: 24px;
padding: 17px 30px;
border: 1px solid #ccc;
outline: 0;
font-size: 15px;
color: #797979;
font-family: "Crimson Text",serif;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
You have to change the "width" element, in percentage.
Inspect the text field on browser and apply the same style to the class assigned to the input as per scope. I think the contact form input usually has a class name "input". Something like this might help
.et_pb_contact p input
{
background-color: #fff;
color: #000;
width: 50%;
}
It might not work because the plugin css styles are overridden by other styles. You might need to either add !important to your property as shown below.
input[type="text"] {
background-color: #fff;
color: #000;
width: 50% !important;
}
This is usually not recommended see this article https://uxengineer.com/css-specificity-avoid-important-css/.
The best approach is to add a class or id before the css style to apply the styling only to that element. See the full code below:
#form_container_with_contact_form input[type="text"] {
background-color: #fff;
color: #000;
width: 50%;
}
If you wanna adjust all your fields to be 100 % width, you can simply use this css:
input {
width: 100%;
}
If you need to specify certain fields:
input[type="text"] {
width: 100%;
}
As mentioned, there's a styling guide.
Related
I have a problem with styling a textarea, i use bootstrap 4 css
i was trying to styling by my self but if i using a padding or margin it's make the textarea height to big
.comment-box {
padding: 0.8rem 1rem;
border-radius: 30px;
}
<textarea class="form-control comment-box" rows="1"></textarea>
i want this textarea look like input field with button in inside just like this image
textarea input
Here
is the complete explanation about overriding bootstrap style. I am sure you can follow that rule and solve that issue.
Edit:
Also you don't need to implement his first and second step. You can follow only 3 and create new style that override the bootstrap style
https://www.w3schools.com/howto/howto_css_contact_form.asp">here is a link to your answer
that should solve your issue, check out the css they use and play with it.
input[type="text"],
select,
textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 10px;
}
input[type="submit"] {
border: none;
background: #4aaaa5;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
font-size: 16px;
}
When using "disabled" on the textarea it changes its text-color and other attributes, how can I maintain the style of the textarea without having to write the same css inside textarea:disabled ? I only want to avoid providing inputs
input, textarea {
outline: none;
border: none;
display: block;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: $ptsans;
font-size: rem(16);
color: $text-color;
#include placeholder {
color: $placeholder;
}
background-color: #fff !important;
}
p {
line-height: rem(21);
}
textarea {
width: 100%;
resize: none;
background-color:transparent!important;
&.editable {
width:97%;
padding:10px;
background-color:#fff!important;
height:80px;
border-color:#ced2db ;
border-radius: 3px;
border-style: solid;
border-width: 1px;
}
}
textarea:disabled {
//Should I write all same styles here again?
}
Since you are using a preprocessor to make final CSS there is an option to use "mixin" / "extend" - proper use depends on case. Please check docs. Plain old CSS selectors grouping can be also in handy, like that:
textarea, textarea: disabled {
width: 100%;
resize: none;
/* other properties here... */
}
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
I have an input box, which is quite small when it's loaded and I want it to resize to become bigger when the user clicks on it (with CSS).
The CSS code I have is:
input.tagInputField {
box-sizing: border-box;
border: none;
background-color: #fff;
width: 2em;
color: #000;
font-size: 14px;
}
input.tagInputField:focus {
width: 50px;
}
But it's not working... no response... Any ideas?
Thanks!
UPDATE
the html code (sorry for the pic, it was the fastest to get it this way)
It worked. Some other styles were overriding this one, so as per #putvande suggestion I checked that and added !important
input.tagInputField:focus {
width: 50px !important;
}
I want to align the checkbox, label and text input in a same line using css. I can do it by using the default template of the browser.
However I really liked the simple theme given in this link. The theme has label and a input text. I wanted to add a checkbox as well at the beginning of the line. Somehow adding a checkbox inside the div makes the arrangement awry.
Though its better to look at the code in the link, I am providing a snapshot here:
HTML
<form>
<div>
<!--NEED TO ADD CHECKBOX HERE -->
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
</form>
CSS3
/* Onto the styling now. Some quick generic styles first. */
html, body {
width: 100%; height: 100%;
}
body {
font-size: 76%;
font-family: Verdana;
background: #eee;
padding: 50px 0;
}
form {
background: #fafafa;
padding: 20px;
width: 400px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
p.s: It will be delightful if someone can stylize the checkbox in the same way as the example
try this one,
form input[type="checkbox"] {
width:20px;
}
<div>
<input type="checkbox" >
<label for="pub_url">Public URL</label>
<input type="text" id="pub_url" name="pub_url" value="http://cssdeck.com">
</div>
http://jsfiddle.net/KW6AY/1/
Here you go \w quick styling:
http://codepen.io/daniesy/pen/puema
alter the css to input[type="text"] and lower the width to around 60% (so it won't affect your checkbox), add a checkbox with a float left
just rename class
form input into form input[type="text"]
Good luck.