I'm stuck on a styling issue with WP's contact form 7 plugin again.
This screenshot shows how it looks - apparently, it's set to "width: 100" but the button is centred - so, it's not at 100%.
The code I used for my contact form is this:
/* my custom css*/
input[type=submit] {
background: none;
color: #1fbba6;
border: 2px solid #1fbba6;
border-radius: 50px !important;
padding: 14px 14px;
font-weight: 400;
font-size: 12px;
width: 140px !important;
}
.wpcf7 {
width: 100%;
}
input[type=select] {
width: 100% !important;
color: #d9d9d9;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background: none;
color: #1fbba6;
}
.wpcf7-form select {
width: 100% !important;
}
/* classes that are provided from my theme*/
#media screen and (-webkit-min-device-pixel-ratio: 0)
template.min.css?ver=4.15.13:1
.kl-fancy-form-select {
height: 52px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.06);
background-image: url(../images/select-arrow.svg);
background-repeat: no-repeat;
background-size: 6px 12px;
background-position: calc(100% - 10px) 50%;
background-position-y: center;
background-position-x: calc(100% - 10px);
}
<label>[text* your-name placeholder "Dein Name*"] </label>
<label>[email* your-email placeholder "Deine E-Mail*"] </label>
<label>[tel phone placeholder "Telefon"]</label>
<label>[select* class:zn_form_input class:form-control--light class:kl-fancy-form-select training "Ich interessiere mich für:" "Personal Training" "Mini-Kurse" "Rückbildung" "Sonstiges"]</label>
<label>[textarea your-message placeholder "Deine Nachricht"] </label>
<center>[submit "Nachricht senden"]</center>
Why is it not accepting my "width: 100%!important;"? What can I do to make it accept that?
Thank you for your help!
Related
I have a simple input which contains an icon on the right side and text on the left side
Here is what I would like to have in mobile version:
here is what I have so far in desktop version
HTML
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
csss
#media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
}
#input-icon {
background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
background-position: right;
/* opacity: 0.4; */
}
**
UPDATE
**
To simplify things here is my jsfiddle with the icon I am using :
http://jsfiddle.net/Mwanitete/z0x6uta2/2/
what do I need to do get what I want? I tried opacity but didn't work as expected?
.form_input {
font-size: 12px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: 1px solid #ccc;
border-radius: 5px;
}
#input-icon {
background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
background-size: 7px;
background-position: right;
opacity: 0.4;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Result Preview:
You can also use this.
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
background-position: 100%;
background-size: 4%;
}
<div class="form_group">
<input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>
Here is solution based on Dementic's answer ,
.form_input {
font-size: 10px;
font-family: Roboto;
font-weight: normal;
width: 342px;
border: none;
border-bottom: 1px solid;
}
#input-icon {
background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
background-position: right;
background-size: 12px;
height: 4px;
opacity: 0.4;
}
.form_input::-webkit-input-placeholder { /* WebKit browsers */
color: transparent;
}
jsfiddle for anyone interest to see the expected result
http://jsfiddle.net/Mwanitete/z0x6uta2/16/
Thanks all for help #StopActa2Though
you are able to change icon size inside the input field using background-size:20px;
example is given below according to your code
#input-icon {
background-size: 20px;
}
Check boxes are working fine in chrome but not in internet explorer.
Here is my HTML code:
<div class="patient-div-w" style="width: 9.5vw;">
<input type="checkbox" id="edema" class="input-checkbox-l">
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label>
<br>
</div>
Here is my CSS code:
input[type="checkbox"] {
opacity: 0;
margin: 0px 3px 0px 0px;
}
.input-checkbox-l[type="checkbox"] + label {
background-image: url(../images/unchk.png);
background-size: 1.2vw;
background-repeat: no-repeat;
padding-left: 1.7vw;
background-position: 0vh 0vw;
width: 8vw;
margin: 0vw;
position: relative;
top: -.1vh;
left: -1.6vw;
white-space: nowrap;
font-family: "Roboto Regular";
}
.label-n {
font-size: 1vw;
color: #000;
}
The same is the problem with radio buttons.
Any kind of help is highly appreciated.
Try this:
Lets assume the parent of .patient-div-w is .parent-div. So we need to do the following:
.parent-div{
overflow: auto;
zoom: 1;
}
This is a very common issue. You can read more about it here
Try this
In your code
<label class="label-n" for="edema" style="line-height: 8vh;">Edema</label> Just remove inline style="line-height:8vh;. it will work.
you can use below code as a reference and it will work IE, FF, Chrome
.input-checkbox-l[type="checkbox"] + label {
box-sizing:border-box;
padding:0px 20px 0px 55px;
background:url(https://i.stack.imgur.com/EAkMC.png) no-repeat center left 5px;
background-size: 30px;
font-size:22px;
margin-right:5px;
display:inline-block;
}
You can try without image
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
border:1px solid blue;
outline: none;
}
div{
display: inline-block;
}
div span{
vertical-align: super;
}
HTML
<div>
<input type="checkbox" name="" value="1"><span>Label name</span>
</div>
Please have a view at this image:
As from the image you can see that I have entered text in the input box but as I also have a button placed in that box so the text is getting hidden below the box.
Is there any way to prevent that, the button should also be on that place and the text should not hide instead it shoud be focused if further text is being typed.
Html code is:
<div class="form">
<input type="text" placeholder="Subscribe & Get Notified" id="email_inp">
<button style="outline: none;" class="btn-1 span btn-4 btn-4a icon-arrow-right" id="email_btn"><span></span></button>
</div>
The css code is:
#media only screen and (max-width: 768px)
{
input[type="text"]
{
font-family: "titillium_webregular", Arial, sans-serif;
border: none;
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
color: rgba(85, 85, 85, 0.85);
font-size: 1.1em;
display: inline;
padding: 19.7px 13px;
background: #f5f5f5;
outline: none;
width: 93%;
box-shadow: 0px 11px 34px #111;
vertical-align: middle;
}
.btn-1
{
cursor: pointer;
padding: 29px 29px;
display: inline-block;
position: relative;
vertical-align: middle;
margin-left: -67px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
}
Any helps appreciated. Thanks in advance.
Try this.. You can see a space right to the textbox. I have added padding right to the textbox
$(function(){
$('#tbcss').val('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
});
#tbcss
{
padding-right: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" id="tbcss"/>
In my opinion, you should use your styling in a bit different way and use .form CSS selector too. You can use flexbox for example:
.form {
// NEW:
display: flex;
justify-content: space-between;
// Your old input CSS:
-webkit-border-radius: 3px 33px 33px 3px;
border-radius: 10px 33px 33px 10px;
background: #f5f5f5;
box-shadow: 0px 11px 34px #111;
width: 93%;
}
input[type="text"] {
// NEW:
width: 100%;
// Your old without unnecessary CSS:
font-family: "titillium_webregular", Arial, sans-serif;
color: rgba(85, 85, 85, 0.85);
border: none;
font-size: 1.1em;
padding: 19.7px 13px;
outline: none;
vertical-align: middle;
}
.btn-1 {
// NEW
align-self: flex-end;
// Your old without unnecessary CSS:
cursor: pointer;
padding: 29px 29px;
text-indent: -9999px;
margin-top: 1px;
outline: none;
width: 20px;
height: 14px;
border:none;
}
Add webkit CSS properties in case you need support in older browsers.
If you wish to prevent the image from hiding the text, then all you need to do is increase the padding-right property on the input textfield.
Maybe try a value of 40px or even more until you're satisfied with the result, then the caret should never go below the button.
Just add this:
input[type="text"]
{
padding-right:5%;
}
In this case all u need to do is add "padding-right: 50 px;" to the input text box class(50 is just a number u can increase or decrease that according to your need)
I'm a fairly new coder, so I hope this question makes sense.
I am building a website and currently working on the Navigation bar.
As I am building the search bar, using a sprite image I have come across a problem when viewing the site live in different browsers.
the search button image renders differently on safari compared to firefox, chrome, IE and Opera.
<hgroup>
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/>
</form>
<p class=login>LogIn<p class=arrow-down></p></p>
<p class=line>|</p>
<p class=signup>Sign Up</p>
</hgroup>
this is the CSS3 code for it:
#header-search {
overflow: visible;
}
input.searchbox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #af5354;
border: 1px solid #af5354;
border-radius: 5px;
color: #fff;
float: left;
height: 19px;
margin-left: 0.5em;
margin-top: 0.2em;
outline: 0 none;
padding-left: 0.5em;
padding-top: 0.3em;
text-align: left;
width: 220px;
}
input.searchbox {
margin-top: 00.3em;
}
input.searchbox:focus {
background: #e87476;
background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));
outline: 0;
color: #FFF;
}
*::-webkit-input-placeholder {
color: #FFF;
}
*:-moz-placeholder {
color: #FFF;
}
*::-moz-placeholder {
color: #FFF;
}
*:-ms-input-placeholder {
color: #FFF;
}
#header-search input.button {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
float: left;
border: none;
background: url("../../assets/images/sprite.png") -142px -7px;
overflow: hidden;
}
#header-search input.button:hover {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
background: url("../../assets/images/sprite.png") -142px -47px;
float: left;
border: none;
}
Any help would be appreciated.
thank you.
The view of html elements is different in each web browser and it's all because each web browser may have different engine. If you would like to have similar display on each web browser maybe you should try use boostrap?
1.You can download it from: http://getbootstrap.com/
2.Next you have to put the file bootstrap.min.css in the location where is your index.html
3.Next include the command
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
between
<head></head>
markers.
The second case- If You use html5 and css3 You don't need to use
-webkit-border-radius:
Just use:
border-radius:
For all(actual versions) web browsers it should be ok.
Or maybe I don’t understand your question.. hmm?
Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>