I am looking for a way to override the checked (x) style in a foundation for custom checkbox
Following the custom forms documentation I have successfully implemented a custom checkbox as follows:
<form class="custom">
<label for="checkbox1">
<input type="checkbox" id="checkbox1" CHECKED />
<span class="custom checkbox checked"></span>Label for checkbox 1
</label>
</form>
This allows me to make css style changes to the look of the checkbox, but I can't find a way te effect the x itself.
if you look in the CSS file used on the page you link to, you will find this part, that is styling the checked checkbox:
form.custom .custom.checkbox.checked:before {
content: "\00d7";
color: #222222;
position: absolute;
top: -50%;
left: 50%;
margin-top: 4px;
margin-left: -5px;
}
changing the content will change the symbol displayed. Hope this helps.
DEMO (provided in Andrey's comment)
change the value of content in your css
form.custom .custom.checkbox.checked:before {
content: "×00d7";}
to
form.custom .custom.checkbox.checked:before {
content: "*";}
or what ever you want
Try this code which would change the "x" to true sign
form.custom .custom.checkbox.checked:before {
content: "\2714";}
Related
I'm using Contact Form 7 plugin in Wordpress to add a form. I'm running into a problem when using textarea in the form; I have my tags styled with background-color: #0090bc;. However, it is displaying below the textarea also.
FRONT-END CODE FOR HOWARD E
Hope this helps
<p><label>Aim of Website<br>
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span></label></p>
I've tried wrapping it in a div and setting the CSS
.full-spread textarea{
width: 100%;
height: 100%;
float: left;
position:relative;
}
Although this technically fixes the issue I run into another one where there is no gap between the next element below this div then - and I can't figure out how to resolve that new issue then either.
This, however, doesn't solve my issue so you can ignore it.
Here is my code to support the screenshots:
<label>Aim of Website[textarea your-website-goal-1 placeholder "e.g. 'I just need a website
so that I can link people to it through social media'..."]</label>
</div>
<label>Websites you've seen online that you like
[textarea influenced-website-1 placeholder "e.g. ''www.thiswebsite.com' - I like how this website details everything on one page'..."]</label>
<div>
My label tags are target with this CSS:
.wpcf7-form label {
text-align:center;
color: white;
padding-top: 5px;
background-color: #0090bc;
border-radius: 4px 4px 0px 0px;
}
Targeting this textarea by adding margin-bottom:-1%; it removes the extra bit of the label tag showing under the textarea
<span class="wpcf7-form-control-wrap your-website-goal-1"><textarea name="your-website-goal-1" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="e.g. 'I just need a website so that I can link people to it through social media'..."></textarea></span>
I am trying to integrate an HTML 5 required checkbox into a form:
<p>
<input class="checkbox" type="checkbox" required name="terms"> By submitting you agree to the processing of your data for the purpose of processing your request/booking.
<br>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
</p>
It is not displaying in a single browser. I haven't had this problem with other sites before, this site is running Bootstrap v2.2.2.
I found some possible solution with labels which didn't work.
Your Style.css file has this rule:
input[type="checkbox"] {
display: none;
}
Delete it and you will see your checkbox.
If you need that rule for whatever reason and you only want to override it for this particular checkbox, then you'll have to add another CSS rule to override it. Obviously, adding an inline style will do the job, but it might be not the best way to go:
<input class="checkbox" type="checkbox" required name="terms" style="display: inline-block;">
Your style.css might contain the appearance css property. This is used to display an element using platform-native styling, based on the operating system's theme. Look up : https://developer.mozilla.org/en-US/docs/Web/CSS/appearance
your code might contain a css rule such as:
input {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}
if you wanna keep this property and change the checkbox specifically then use :
input[type="checkbox"] {
appearance: checkbox !important;
}
You can use both css.
But here
style="display: inline-block;"
inside input type are override display: none;
input.checkbox {
display: inline-block;
}
/*input[type="checkbox"] {
display: inline-block;
}*/
<p>
<input class="checkbox" type="checkbox" required name="terms">By submitting you agree to the processing of your data for the purpose of processing your request/booking.
</p>
<a href="/en/datenschutz.php" target="_blank">
<u>Privacy Policy</u>
</a>
I've created a sliding button with css using the :after element.
The problem I'm having is that my "input" buttons don't seem to use the :after element and they don't slide like my normal buttons.
<input type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary" />
Is there any way that I can use the :after element on this or is there any possible workaround?
edit: To add a little more info here is the css for the button.
.btn-cart {
color: #3498db;
}
.btn-cart:hover,
.btn-cart:focus,
.btn-cart:active {
background: none;
border-color: transparent;
}
.btn-cart:hover:after,
.btn-cart:focus:after,
.btn-cart:active:after {
width: 100%;
}
.btn-cart:after {
background: #3498db;
}
input.btn-cart:hover,
button.btn-cart:hover,
input.btn-cart:focus,
button.btn-cart:focus,
input.btn-cart:active,
button.btn-cart:active {
background: #3498db;
}
I have tried the ::after but that doesn't work :(
The button does not slide on any browser because the :after element isn't working on any input buttons.
Any help will be much appreciated :)
Thanks,
Richard
I found a solution myself. This works for my input buttons, I changed "input" to "button" in my original code and added the word "login". See working code below,
<p><button type="submit" value="<?php echo $button_login; ?>" class="btn btn-primary">Login</button></p>
I'm attempting to override the default simple_form styles for a collection/drop down I have, but am unable to get the width to adjust as my drop down takes up the entire width of the page.
I've add the css provided here, https://github.com/plataformatec/simple_form/wiki/CSS-for-simple_form to my stylesheet and have added a class to be applied to the drop down.
.simple_form div.input {
margin-bottom: 10px;
clear: both; /* Required for Webkit, but not for Gecko */
}
.simple_form label {
float: left;
width: 100px;
text-align: right;
margin: 2px 10px;
}
div.boolean, .simple_form input {
margin-left: 120px;
}
.simple_form input.test {
width: 30px;
}
I used the information from this, Rails simple_form label_html and Add a class to each select options with SimpleForm in attempt to get it work, but while my test class is added, it shows as, class="select optional test". I'm unclear on where the "select optional" is coming from and how to remove it.
In the end, the resulting HTML looks like,
<div class="input select optional f_User">
<label class="select optional" for="f_User">User</label>
<select class="select optional test" id="f_User" name="f[User]">
<option value=""></option>
<option value="15">Shawn</option>
<option value="87">Bob</option>
<option value="88">John</option>
<option value="89">Mary</option>
</select>
</div>
Thanks in advance for your time and assistance.
The classes select and optional seem to be generated by SimpleForm to style the selection box. Taking a look at the code for custom wrappers, each input type has a CSS associated to it based on the input name, i.e. selects have a class="select" etc. The optional class seems to come from the custom options assigned to the specific field such as is the field required or not. If you truly want to remove them, it seems you'll have to monkey patch SimpleForm to achieve this or create a custom wrapped with the css classes you choose.
That said, you could overwrite the width parameter for the "select" class:
.select {
width: 30px;
}
Please, help me!
I need to modify width of standart dialog form for adding element into library.
If I click to ribbon button for adding element, form opened with width=402px:
<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 402px; height: 294px; left: 430px; top: 104px; "></div>
If I click to button under all elements of current library, form opened with width=1032px:
<div class="ms-dlgContent" role="dialog" aria-labelledby="dialogTitleSpan" tabindex="-1" style="z-index: 1505; display: block; width: 1032px; height: 267px; left: 115px; top: 273px; "></div>
I can't understand, what I need to do for opening in the second case form with width=402px.
Maybe need enter some code in Upload.aspx? (this form generate automatically)
I guess, this page open for creating new element, because schema.xml for my list definition contain this code:
<Forms>
<Form Type="DisplayForm" SetupPath="pages\form.aspx" Url="Forms/DispForm.aspx" WebPartZoneID="Main" />
<Form Type="EditForm" SetupPath="pages\form.aspx" Url="Forms/EditForm.aspx" WebPartZoneID="Main" />
<Form Type="NewForm" Url="Forms/Upload.aspx" WebPartZoneID="Main" />
</Forms>
But if modify this part of Upload.aspx (add .ms-dglContent class), it doesn't help me:
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
padding: 8px;
border: none;
}
.ms-dglContent {
width:402px!important;
}
</style>
</asp:Content>
If I modify css files:
.ms-dglContent {width:402px!important;}
it modify all dialog forms, but in my case is unacceptable.
I would be grateful for any attempt to help!
Modal dialog div is place dynamically into DOM. If want to modify dialog dimensions try to find call like SP.UI.ModalDialog...
var dialogCallbackToMainSite = function (dialogResult, returnValue) {
if(returnValue == 'someValue') {
}
};
var option = {
url:record.data.url,
title:'Task',
allowMaximize:false,
showClose:false,
autoSize:false,
width: 800,
height: 600,
dialogReturnValueCallback:dialogCallbackToMainSite
};
SP.UI.ModalDialog.showModalDialog(option);
BTW if you need to vertical center dialog in situation when ribbon scroll with page and it´s static position is disable follow this solution http://generation12.wordpress.com/2011/10/25/floating-the-sp-ui-modaldialog/
I'm not used to working in Sharepoint, but it seems to me that the function that triggers the dialog to be displayed is provided different values on measurement variables somehow, so yes, you probably need to change your code somewhere. Try searching your entire solution for "1032" - maybe that width measurement is assigned to a variable somewhere.
If you want both of the dialogs to look the same and can't find where they are given their measurements (though, I strongly recommend that you try that first), you could perhaps override the inline-styling by using !important, like so:
.ms-dglContent {width:402px!important;}